Autofill dropdown hide when clicking outside [duplicate] - javascript

Suppose I have one div in my page. how to detect the user click on div content or outside of div content through JavaScript or JQuery. please help with small code snippet.
thanks.
Edit: As commented in one of the answers below, I only want to attach an event handler to my body, and also want to know which element was clicked upon.


Here's a one liner that doesn't require jquery using Node.contains:
// Get arbitrary element with id "my-element"
var myElementToCheckIfClicksAreInsideOf = document.querySelector('#my-element');
// Listen for click events on body
document.body.addEventListener('click', function (event) {
if (myElementToCheckIfClicksAreInsideOf.contains(event.target)) {
console.log('clicked inside');
} else {
console.log('clicked outside');
}
});
If you're wondering about the edge case of checking if the click is on the element itself, Node.contains returns true for the element itself (e.g. element.contains(element) === true) so this snippet should always work.
Browser support seems to cover pretty much everything according to that MDN page as well.


Using jQuery:
$(function() {
$("body").click(function(e) {
if (e.target.id == "myDiv" || $(e.target).parents("#myDiv").length) {
alert("Inside div");
} else {
alert("Outside div");
}
});
})
#myDiv {
background: #ff0000;
width: 25vw;
height: 25vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>


Using jQuery, and assuming that you have <div id="foo">:
jQuery(function($){
$('#foo').click(function(e){
console.log( 'clicked on div' );
e.stopPropagation(); // Prevent bubbling
});
$('body').click(function(e){
console.log( 'clicked outside of div' );
});
});
Edit: For a single handler:
jQuery(function($){
$('body').click(function(e){
var clickedOn = $(e.target);
if (clickedOn.parents().andSelf().is('#foo')){
console.log( "Clicked on", clickedOn[0], "inside the div" );
}else{
console.log( "Clicked outside the div" );
});
});


Rather than using the jQuery .parents function (as suggested in the accepted answer), it's better to use .closest for this purpose. As explained in the jQuery api docs, .closest checks the element passed and all its parents, whereas .parents just checks the parents.
Consequently, this works:
$(function() {
$("body").click(function(e) {
if ($(e.target).closest("#myDiv").length) {
alert("Clicked inside #myDiv");
} else {
alert("Clicked outside #myDiv");
}
});
})


What about this?
<style type="text/css">
div {border: 1px solid red; color: black; background-color: #9999DD;
width: 20em; height: 40em;}
</style>
<script type="text/javascript">
function sayLoc(e) {
e = e || window.event;
var tgt = e.target || e.srcElement;
// Get top lef co-ords of div
var divX = findPosX(tgt);
var divY = findPosY(tgt);
// Workout if page has been scrolled
var pXo = getPXoffset();
var pYo = getPYoffset();
// Subtract div co-ords from event co-ords
var clickX = e.clientX - divX + pXo;
var clickY = e.clientY - divY + pYo;
alert('Co-ords within div (x, y): ' + clickX + ', ' + clickY);
}
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}
function getPXoffset() {
if (self.pageXOffset) {
// all except Explorer
return self.pageXOffset;
} else if (
document.documentElement &&
document.documentElement.scrollTop
) {
// Explorer 6 Strict
return document.documentElement.scrollLeft;
} else if (document.body) {
// all other Explorers
return document.body.scrollLeft;
}
}
function getPYoffset() {
if (self.pageYOffset) {
// all except Explorer
return self.pageYOffset;
} else if (
document.documentElement &&
document.documentElement.scrollTop
) {
// Explorer 6 Strict
return document.documentElement.scrollTop;
} else if (document.body) {
// all other Explorers
return document.body.scrollTop;
}
}
</script>
<div onclick="sayLoc(event);"></div>
(from http://bytes.com/topic/javascript/answers/151689-detect-click-inside-div-mozilla, using the Google.)


This question can be answered with X and Y coordinates and without JQuery:
var isPointerEventInsideElement = function (event, element) {
var pos = {
x: event.targetTouches ? event.targetTouches[0].pageX : event.pageX,
y: event.targetTouches ? event.targetTouches[0].pageY : event.pageY
};
var rect = element.getBoundingClientRect();
return pos.x < rect.right && pos.x > rect.left && pos.y < rect.bottom && pos.y > rect.top;
};
document.querySelector('#my-element').addEventListener('click', function (event) {
console.log(isPointerEventInsideElement(event, document.querySelector('#my-any-child-element')))
});


For bootstrap 4 this works for me.
$(document).on('click', function(e) {
$('[data-toggle="popover"],[data-original-title]').each(function() {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide')
}
});
});
working demo on jsfiddle link:
https://jsfiddle.net/LabibMuhammadJamal/jys10nez/9/


In vanilla javaScript - in ES6
(() => {
document.querySelector('.parent').addEventListener('click', event => {
alert(event.target.classList.contains('child') ? 'Child element.' : 'Parent element.');
});
})();
.parent {
display: inline-block;
padding: 45px;
background: lightgreen;
}
.child {
width: 120px;
height:60px;
background: teal;
}
<div class="parent">
<div class="child"></div>
</div>


If you want to add a click listener in chrome console, use this
document.querySelectorAll("label")[6].parentElement.onclick = () => {console.log('label clicked');}


function closePopover(sel) {
$('body').on('click', function(e) {
if (!$(event.target).closest(sel+', .popover-body').length) {
$(sel).popover('hide');
}
});
}
closePopover('#elem1');
closePopover('#elem2');


Instead of using the body you could create a curtain with z-index of 100 (to pick a number) and give the inside element a higher z-index while all other elements have a lower z-index than the curtain.
See working example here: http://jsfiddle.net/Flandre/6JvFk/
jQuery:
$('#curtain').on("click", function(e) {
$(this).hide();
alert("clicked ouside of elements that stand out");
});
CSS:
.aboveCurtain
{
z-index: 200; /* has to have a higher index than the curtain */
position: relative;
background-color: pink;
}
#curtain
{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
background-color: black;
width: 100%;
z-index:100;
opacity:0.5 /* change opacity to 0 to make it a true glass effect */
}

Related

Add and Remove class on window scroll [duplicate]

So basically I'd like to remove the class from 'header' after the user scrolls down a little and add another class to change it's look.
Trying to figure out the simplest way of doing this but I can't make it work.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll <= 500) {
$(".clearheader").removeClass("clearHeader").addClass("darkHeader");
}
}
CSS
.clearHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.darkHeader { height: 100px; }
.wrapper {
height:2000px;
}
HTML
<header class="clearHeader"> </header>
<div class="wrapper"> </div>
I'm sure I'm doing something very elementary wrong.

$(window).scroll(function() {
var scroll = $(window).scrollTop();
//>=, not <=
if (scroll >= 500) {
//clearHeader, not clearheader - caps H
$(".clearHeader").addClass("darkHeader");
}
}); //missing );
Fiddle
Also, by removing the clearHeader class, you're removing the position:fixed; from the element as well as the ability of re-selecting it through the $(".clearHeader") selector. I'd suggest not removing that class and adding a new CSS class on top of it for styling purposes.
And if you want to "reset" the class addition when the users scrolls back up:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});
Fiddle
edit: Here's version caching the header selector - better performance as it won't query the DOM every time you scroll and you can safely remove/add any class to the header element without losing the reference:
$(function() {
//caches a jQuery object containing the header element
var header = $(".clearHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.removeClass('clearHeader').addClass("darkHeader");
} else {
header.removeClass("darkHeader").addClass('clearHeader');
}
});
});
Fiddle

Pure javascript
Here's javascript-only example of handling classes during scrolling.
const navbar = document.getElementById('navbar')
// OnScroll event handler
const onScroll = () => {
// Get scroll value
const scroll = document.documentElement.scrollTop
// If scroll value is more than 0 - add class
if (scroll > 0) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled")
}
}
// Use the function
window.addEventListener('scroll', onScroll)
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 60px;
background-color: #89d0f7;
box-shadow: 0px 5px 0px rgba(0, 0, 0, 0);
transition: box-shadow 500ms;
}
#navbar.scrolled {
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}
#content {
height: 3000px;
margin-top: 60px;
}
<!-- Optional - lodash library, used for throttlin onScroll handler-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<header id="navbar"></header>
<div id="content"></div>
Some improvements
You'd probably want to throttle handling scroll events, more so as handler logic gets more complex, in that case throttle from lodash lib comes in handy.
And if you're doing spa, keep in mind that you need to clear event listeners with removeEventListener once they're not needed (eg during onDestroy lifecycle hook of your component, like destroyed() for Vue, or maybe return function of useEffect hook for React).
Example throttling with lodash:
// Throttling onScroll handler at 100ms with lodash
const throttledOnScroll = _.throttle(onScroll, 100, {})
// Use
window.addEventListener('scroll', throttledOnScroll)

Add some transition effect to it if you like:
http://jsbin.com/boreme/17/edit?html,css,js
.clearHeader {
height:50px;
background:lightblue;
position:fixed;
top:0;
left:0;
width:100%;
-webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
transition: background 2s;
}
.clearHeader.darkHeader {
background:#000;
}

Its my code
jQuery(document).ready(function(e) {
var WindowHeight = jQuery(window).height();
var load_element = 0;
//position of element
var scroll_position = jQuery('.product-bottom').offset().top;
var screen_height = jQuery(window).height();
var activation_offset = 0;
var max_scroll_height = jQuery('body').height() + screen_height;
var scroll_activation_point = scroll_position - (screen_height * activation_offset);
jQuery(window).on('scroll', function(e) {
var y_scroll_pos = window.pageYOffset;
var element_in_view = y_scroll_pos > scroll_activation_point;
var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;
if (element_in_view || has_reached_bottom_of_page) {
jQuery('.product-bottom').addClass("change");
} else {
jQuery('.product-bottom').removeClass("change");
}
});
});
Its working Fine

Is this value intended? if (scroll <= 500) { ... This means it's happening from 0 to 500, and not 500 and greater. In the original post you said "after the user scrolls down a little"

In a similar case, I wanted to avoid always calling addClass or removeClass due to performance issues. I've split the scroll handler function into two individual functions, used according to the current state. I also added a debounce functionality according to this article: https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers
var $header = jQuery( ".clearHeader" );
var appScroll = appScrollForward;
var appScrollPosition = 0;
var scheduledAnimationFrame = false;
function appScrollReverse() {
scheduledAnimationFrame = false;
if ( appScrollPosition > 500 )
return;
$header.removeClass( "darkHeader" );
appScroll = appScrollForward;
}
function appScrollForward() {
scheduledAnimationFrame = false;
if ( appScrollPosition < 500 )
return;
$header.addClass( "darkHeader" );
appScroll = appScrollReverse;
}
function appScrollHandler() {
appScrollPosition = window.pageYOffset;
if ( scheduledAnimationFrame )
return;
scheduledAnimationFrame = true;
requestAnimationFrame( appScroll );
}
jQuery( window ).scroll( appScrollHandler );
Maybe someone finds this helpful.

For Android mobile $(window).scroll(function() and $(document).scroll(function() may or may not work. So instead use the following.
jQuery(document.body).scroll(function() {
var scroll = jQuery(document.body).scrollTop();
if (scroll >= 300) {
//alert();
header.addClass("sticky");
} else {
header.removeClass('sticky');
}
});
This code worked for me. Hope it will help you.

This is based of of #shahzad-yousuf's answer, but I only needed to compress a menu when the user scrolled down. I used the reference point of the top container rolling "off screen" to initiate the "squish"
<script type="text/javascript">
$(document).ready(function (e) {
//position of element
var scroll_position = $('div.mainContainer').offset().top;
var scroll_activation_point = scroll_position;
$(window).on('scroll', function (e) {
var y_scroll_pos = window.pageYOffset;
var element_in_view = scroll_activation_point < y_scroll_pos;
if (element_in_view) {
$('body').addClass("toolbar-compressed ");
$('div.toolbar').addClass("toolbar-compressed ");
} else {
$('body').removeClass("toolbar-compressed ");
$('div.toolbar').removeClass("toolbar-compressed ");
}
});
}); </script>

Detect hover/mouseover/mouseenter while dragging an element

How to detect hover/mouseover/mouseenter while dragging an element? I want to have green box after hovering it with the "drag" element. Is there any solution for that?
Note: I know that I could use jQuery UI for it but I want to do it by myself.
$("box").mouseover(function() {
$(this).addClass("green");
var box = $(this).attr("id");
$("#result").html(box);
});
$("box").mouseleave(function() {
$(this).removeClass("green");
});
$("drag").bind({
mousedown: function() {
$(this).addClass("absolute");
},
mouseup: function() {
$(this).removeClass("absolute");
},
mousemove: function(e) {
$(this).css({
left: e.pageX - (50 / 2),
top: e.pageY - (50 / 2)
});
}
});
$("body").mousemove(function(event) {
$("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
});
https://jsfiddle.net/38zecoL1/1/
Thank you for any help.

I would try to disable pointer events on the dragged object using: pointer-events: none;. That way you should get the events of the hovered objects instead of the dragged.
But you also need to adapt to the situation that the move and mouseup event will not work. You will have to bind them elsewhere (body for example)
This short example is not perfect but schuld give you a hint of how to do it better ;)
$("box").mouseover(function () {
$(this).addClass("green");
var box = $(this).attr("id");
$("#result").html(box);
});
$("box").mouseleave(function () {
$(this).removeClass("green");
});
$("#drag").bind({
mousedown : function (e) {
$(document.body).css({ 'user-select': 'none' })
var dragged = $(this);
dragged.css({
left : e.pageX - (50 / 2),
top : e.pageY - (50 / 2)
});
dragged.css({
'pointer-events' : 'none'
})
var upHandler = function () {
dragged.removeClass("absolute");
dragged.css({
'pointer-events' : 'all'
})
$(document.body).css({ 'user-select': 'initial' })
$("body").off('mouseup', upHandler);
$("body").off('mousemove', moveHandler);
}
var moveHandler = function (e) {
dragged.addClass("absolute");
dragged.css({
left : e.pageX - (50 / 2),
top : e.pageY - (50 / 2)
});
}
$("body").bind({
mouseup : upHandler,
mousemove : moveHandler
})
}
});
$("body").mousemove(function (event) {
$("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
});
box {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 20px;
}
#log {
position: absolute;
top: 150px;
}
.green {
background-color: green;
}
#drag {
width: 50px;
height: 50px;
float: left;
background-color: blue;
}
#drag.absolute {
position: absolute;
}
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<box id="box1">
<div id="drag"></div>
</box>
<box id="box2"></box>
<div id="result"></div>
<div id="log"></div>

The reason the container stays green and the other one doesn't change is that the element you're dragging is a child of the first container. So while your mouse is in the blue draggable box it's still considered inside the container on the left because the blue box is a child of the first container.
One way to fix this (and most likely isn't the best way) is to keep track of where the mouse is on the screen (which you're already doing to move the blue block). In there if you add a bit of code checking if the mouse is within the bounding box of either of the other containers and add/remove classes based on that. Then the classes will be added based on mouse position and not whether the mouse is over an element that is a child or is not a child.
Example: https://jsfiddle.net/38zecoL1/3/
var boxes = $("box")
for(var i = 0; i < boxes.length; i++){
var boundingBox = boxes[i].getBoundingClientRect();
if(e.pageX < boundingBox.right &&
e.pageX > boundingBox.left &&
e.pageY < boundingBox.bottom &&
e.pageY > boundingBox.top){
$(boxes[i]).addClass("green");
} else{
$(boxes[i]).removeClass("green");
}
}
This is likely pretty expensive to add in a page that deals with a more complex page than just a few divs and may not perform well in those more complex situations.

If you want to drag element I recommend you to use this JS library https://github.com/RubaXa/Sortable
There is an opt called
chosenClass: "sortable-chosen", // Class name for the chosen item
and in this class you can add different color and everything you want.
But if you wanto to do this by yourself i don't now

Convert click code to hover code

How can I change the following menu code to open/close when the mouse hovers, instead of when it is clicked on?
var w = 0;
$('.slide').children().each(function () {
w += $(this).outerWidth();
});
$('.outer').width(w + 5);
$('.wrap').width(w);
$('.slide').css('left', w);
$('.open').toggle(function () {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}, function () {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
});
Please check this Demo
In Fiddle, you can see the animation works on click. I need to make it work on hover. Can you help with this ?

Use .hover() api
Try this
$('.open').hover(function () {
instead of
$('.open').toggle(function () {

Just
$('.open').toggle(function() {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}
in this part just replace toggle with hover

Try using $('.wrap').hover. If $('.open').hover, you will not able to click the nav items.
Also, you can create another wrapper to just wrap div.outer and a.open only
$('.wrap').hover(function() {
$('.slide').stop().animate({
left : 0
});
//this is the .wrap right now
$(this).find('a.open').html('close');
}, function() {
$('.slide').stop().animate({
left : w
});
//this is the .wrap right now
$(this).find('a.open').html('open');
});
http://jsfiddle.net/rooseve/42sWB/2/

$('.open').on('mouseenter mouseleave', function(e) {
if(e.type === 'mouseleave') {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
} else {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}
});

var w = 0;
var isVisible = false;
$('.slide').children().each(function() {
w += $(this).outerWidth();
});
$('.outer').width(w+5);
$('.wrap').width(w);
$('.slide').css('left', w);
$('.open').on("mouseover", function() {
if(isVisible == false) {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
isVisible = true;
}
else {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
isVisible = false;
}
});
Firstly, when you hover the element - the div will be visible, until you hover the element for the second time.
Demo: http://jsfiddle.net/42sWB/3/

Scrolling function in JS marginTop is not changing

I have a function where I am trying to create a scrolling effect on the div's content by using an event for mouse wheel.
The listener:
document.getElementById('menu_base').addEventListener("mousewheel", scrollfunc, false);
I have this for my scroll event:
function scrollfunc(e){
console.log(e);
if(e.wheelDeltaY == 120) { //this does work
document.getElementById('menu_base').style.marginTop += 50; //no change
} else if(e.wheelDeltaY == -120){ //as does this
document.getElementById('menu_base').style.marginTop -= 50; //no change
}
}
The console.log shows:
WheelEvent {webkitDirectionInvertedFromDevice: false, wheelDeltaY: -120, wheelDeltaX: 0, wheelDelta: -120, webkitMovementY: 0…}
menu_base properties are:
.menu_base{
width:100%;
height:600px;
position:absolute;
left: 0;
top: 0;
text-align:center;
border:1px solid black;
overflow:hidden;
}
Yet the content does not move, marginTop does not seem to alter.
Any suggestions on what might be the probable cause ?

You need to define the marginTop with an unit, e.g. using px:
var menu_base = document.getElementById('menu_base');
function scrollfunc(e) {
console.log(e);
var mtop = parseInt(menu_base.style.marginTop, 10) || 0;
if (e.wheelDeltaY == 120) { //this does work
mtop += 50; //no change
} else if (e.wheelDeltaY == -120) { //as does this
mtop -= 50; //no change
}
menu_base.style.marginTop = mtop + 'px';
}
Fiddle

Javascript - Track mouse position

I am hoping to track the position of the mouse cursor, periodically every t mseconds. So essentially, when a page loads - this tracker should start and for (say) every 100 ms, I should get the new value of posX and posY and print it out in the form.
I tried the following code - but the values do not get refreshed - only the initial values of posX and posY show up in the form boxes. Any ideas on how I can get this up and running ?
<html>
<head>
<title> Track Mouse </title>
<script type="text/javascript">
function mouse_position()
{
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
document.Form1.posx.value = posX;
document.Form1.posy.value = posY;
var t = setTimeout(mouse_position,100);
}
</script>
</head>
<body onload="mouse_position()">
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
</body>
</html>

The mouse's position is reported on the event object received by a handler for the mousemove event, which you can attach to the window (the event bubbles):
(function() {
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var eventDoc, doc, body;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
// Use event.pageX / event.pageY here
}
})();
(Note that the body of that if will only run on old IE.)
Example of the above in action - it draws dots as you drag your mouse over the page. (Tested on IE8, IE11, Firefox 30, Chrome 38.)
If you really need a timer-based solution, you combine this with some state variables:
(function() {
var mousePos;
document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // setInterval repeats every X ms
function handleMouseMove(event) {
var dot, eventDoc, doc, body, pageX, pageY;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
mousePos = {
x: event.pageX,
y: event.pageY
};
}
function getMousePosition() {
var pos = mousePos;
if (!pos) {
// We haven't seen any movement yet
}
else {
// Use pos.x and pos.y
}
}
})();
As far as I'm aware, you can't get the mouse position without having seen an event, something which this answer to another Stack Overflow question seems to confirm.
Side note: If you're going to do something every 100ms (10 times/second), try to keep the actual processing you do in that function very, very limited. That's a lot of work for the browser, particularly older Microsoft ones. Yes, on modern computers it doesn't seem like much, but there is a lot going on in browsers... So for example, you might keep track of the last position you processed and bail from the handler immediately if the position hasn't changed.

onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}
Open your console (Ctrl+Shift+J), copy-paste the code above and move your mouse on browser window.

Here's a solution, based on jQuery and a mouse event listener (which is far better than a regular polling) on the body:
$("body").mousemove(function(e) {
document.Form1.posx.value = e.pageX;
document.Form1.posy.value = e.pageY;
})

What I think that he only wants to know the X/Y positions of cursor than why answer is that complicated.
// Getting 'Info' div in js hands
var info = document.getElementById('info');
// Creating function that will tell the position of cursor
// PageX and PageY will getting position values and show them in P
function tellPos(p){
info.innerHTML = 'Position X : ' + p.pageX + '<br />Position Y : ' + p.pageY;
}
addEventListener('mousemove', tellPos, false);
* {
padding: 0:
margin: 0;
/*transition: 0.2s all ease;*/
}
#info {
position: absolute;
top: 10px;
right: 10px;
background-color: black;
color: white;
padding: 25px 50px;
}
<!DOCTYPE html>
<html>
<body>
<div id='info'></div>
</body>
</html>

I believe that we are overthinking this,
function mouse_position(e)
{
//do stuff
}
<body onmousemove="mouse_position(event)"></body>

ES6 based code:
let handleMousemove = (event) => {
console.log(`mouse position: ${event.x}:${event.y}`);
};
document.addEventListener('mousemove', handleMousemove);
If you need throttling for mousemoving, use this:
let handleMousemove = (event) => {
console.warn(`${event.x}:${event.y}\n`);
};
let throttle = (func, delay) => {
let prev = Date.now() - delay;
return (...args) => {
let current = Date.now();
if (current - prev >= delay) {
prev = current;
func.apply(null, args);
}
}
};
// let's handle mousemoving every 500ms only
document.addEventListener('mousemove', throttle(handleMousemove, 500));
here is example

Just a simplified version of #T.J. Crowder and #RegarBoy's answers.
Less is more in my opinion.
Check out onmousemove event for more info about the event.
There's a new value of posX and posY every time the mouse moves according to the horizontal and vertical coordinates.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Mouse Tracker</title>
<style>
body {height: 3000px;}
.dot {width: 2px;height: 2px;background-color: black;position: absolute;}
</style>
</head>
<body>
<p>Mouse tracker</p>
<script>
onmousemove = function(e){
//Logging purposes
console.log("mouse location:", e.clientX, e.clientY);
//meat and potatoes of the snippet
var pos = e;
var dot;
dot = document.createElement('div');
dot.className = "dot";
dot.style.left = pos.x + "px";
dot.style.top = pos.y + "px";
document.body.appendChild(dot);
}
</script>
</body>
</html>

if anyone still looking for answer then,
function track(e) {
console.log("X - ", e.pageX, " Y - ", e.pageY);
}
addEventListener("mousemove", track, false);
paste this code in console to see immediate action

If just want to track the mouse movement visually:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
</style>
<body>
<canvas></canvas>
<script type="text/javascript">
var
canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
beginPath = false;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.addEventListener('mousemove', function (event) {
var x = event.clientX, y = event.clientY;
if (beginPath) {
ctx.lineTo(x, y);
ctx.stroke();
} else {
ctx.beginPath();
ctx.moveTo(x, y);
beginPath = true;
}
}, false);
</script>
</body>
</html>

document.addEventListener('mousemove', (event) => {
document.getElementById("line").style.top = event.clientY - 10 + 'px';
document.getElementById("lineY").style.left = event.clientX - 10 + 'px';
document.getElementById("pos").style.top = (event.clientY - 60) + 'px';
document.getElementById("pos").style.left = (event.clientX - 60) + 'px';
});
body {
position: relative;
height: auto;
min-height: 100% !important;
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
.abs {
position: relative;
}
.lineY {
display: flex;
position: relative;
left: 0px;
background-color: black;
width: 2px;
height: 100vh;
min-height: 100%
}
.line {
display: flex;
position: relative;
background-color: black;
min-height: 2px;
width: 100%;
}
.circle {
display: flex;
position: absolute;
left: 0px;
top: 0px;
}
<div class='line' id="line"></div>
<div class='lineY' id="lineY"></div>
<svg height="100" width="100" id="pos" class="circle">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg>

Irrespective of the browser, below lines worked for me to fetch correct mouse position.
event.clientX - event.currentTarget.getBoundingClientRect().left
event.clientY - event.currentTarget.getBoundingClientRect().top

I don't have enough reputation to post a comment reply, but took TJ Crowder's excellent answer and fully defined the code on a 100ms timer. (He left some details to the imagination.)
Thanks OP for the question, and TJ for the answer! You're both a great help. Code is embedded below as a mirror of isbin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
body {
height: 3000px;
}
.dot {
width: 2px;
height: 2px;
background-color: black;
position: absolute;
}
</style>
</head>
<body>
<script>
(function() {
"use strict";
var mousePos;
document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // setInterval repeats every X ms
function handleMouseMove(event) {
var eventDoc, doc, body;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
mousePos = {
x: event.pageX,
y: event.pageY
};
}
function getMousePosition() {
var pos = mousePos;
if (!pos) {
// We haven't seen any movement yet, so don't add a duplicate dot
}
else {
// Use pos.x and pos.y
// Add a dot to follow the cursor
var dot;
dot = document.createElement('div');
dot.className = "dot";
dot.style.left = pos.x + "px";
dot.style.top = pos.y + "px";
document.body.appendChild(dot);
}
}
})();
</script>
</body>
</html>

Here is a solution
document.onmousemove = showCoords;
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("box1").innerHTML = coords;
}

[...document.querySelectorAll("*")].forEach(h => h.addEventListener("mousemove", function(event) {
console.table({
"mouse x": event.clientX,
"mouse y": event.clientY
});
}));

Here is the simplest way to track your mouse position
Html
<body id="mouse-position" ></body>
js
document.querySelector('#mouse-position').addEventListener('mousemove', (e) => {
console.log("mouse move X: ", e.clientX);
console.log("mouse move X: ", e.screenX);
}, );
know more

This is the shortest way to get the coordinates of mouse pointer.
Just put your element where cursor is going to hover, inside $("")
$("***enter you element here***").mousemove(function(event)
{
console.clear()
var x = event.originalEvent.screenX;
var y = event.originalEvent.screenY;
console.log("x : "+x)
console.log("y : "+y)
})

Here’s a combination of the two requirements: track the mouse position, every 100 milliseconds:
var period = 100,
tracking;
window.addEventListener("mousemove", function(e) {
if (!tracking) {
return;
}
console.log("mouse location:", e.clientX, e.clientY)
schedule();
});
schedule();
function schedule() {
tracking = false;
setTimeout(function() {
tracking = true;
}, period);
}
This tracks & acts on the mouse position, but only every period milliseconds.

We recently had to find the current x,y position to enumerate elements over which the cursor is hovering independent of z-index. We ended up just attaching a mousemove event listener to document e.g.,
function findElements(e) {
var els = document.elementsFromPoint(e.clientX, e.clientY);
// do cool stuff with els
console.log(els);
return;
}
document.addEventListener("mousemove", findElements);

Categories