I'm having some strange behaviour from this code:
$(document).mousemove( function(e) {
console.log( e.clientX, e.clientY );
});
It runs inside an iframe and only fires if I hold down the left mouse button and move the mouse. Moving the mouse without holding down the left button does nothing..
Any ideas whats going on here?
an iframe is a separate window, ie if the mouse leaves the iframe any action that void. you have to start it again
$(document).bind("mousedown", function (e) {
var mouseMove = function (e) {
console.log( e.clientX, e.clientY );
};
//[[First click==>*/
mouseMove(e);
$(document).bind("mousemove", mouseMove)
.bind("mouseup",function (e) {
$(document).unbind('mousemove mouseup');
});
});
Related
I am trying to display address on map on popup's as shown below in the image.
Image of popup:
When I hover mouse on pin icon the popup appears but when I move to popup it disappear.
Javascript I am using:
<script>
jQuery(function($) {
var pop = $('.map-popup');
pop.click(function(e) {
e.stopPropagation();
});
$('a.marker').hover(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).next('.map-popup').toggleClass('open');
$(this).parent().siblings().children('.map-popup').removeClass('open');
});
$(document).click(function() {
pop.removeClass('open');
});
pop.each(function() {
var w = $(window).outerWidth(),
edge = Math.round( ($(this).offset().left) + ($(this).outerWidth()) );
if( w < edge ) {
$(this).addClass('edge');
}
});
});
</script>
Code Pen link: codepen
Instead of
$('a.marker').hover(function(e) {
use
$('a.marker').mouseenter(function(e) {
hover handles both mouseenter and mouseleave events. If you don't pass a handler for mouseleave, it will execute the function for mouseenter, so in your case,
$(this).next('.map-popup').toggleClass('open');
is executed again for mouseleave so the popup gets hidden.
Read more here.
As title says, I noticed that on my canvas mousemove is fired when mouse buttons are pressed/released even though I'm not actually moving the mouse. The problem is that, in the case of releasing the button, it gets fired AFTER mouseup!
Is that normal behaviour?
How to fix/workaround? I really need my mouseup to fire last, or mousemove not to fire at all when releasing buttons; setTimeout is not a legit solution.
Sample: https://jsfiddle.net/h40mm4mj/1/ As simple as that: if you open console and click in the canvas, you'll notice mousemove is logged after mouseup
canvas.addEventListener("mousemove", function (e) {
console.log("mousemove");
}, false);
canvas.addEventListener("mouseup", function (e) {
console.log("mouseup");
}, false);
EDIT: Just tested, it only happens on Chromium, Windows.
I´ve was having the same issue. Solve comparing the previus mouse position with new mouse position :
function onMouseDown (e) {
mouseDown = { x: e.clientX, y: e.clientY };
console.log("click");
}
function onMouseMove (e) {
//To check that did mouse really move or not
if ( e.clientX !== mouseDown.x || e.clientY !== mouseDown.y) {
console.log("move");
}
}
Taken from here : What to do if "mousemove" and "click" events fire simultaneously?
I am working with jquery events and I am adding a new element at the time of mousedown at the position of the mouse pointer and after adding the element the binded click event is not triggered.
Any suggestion is appreciable.
Thanks in advance.
Madhu
Code:
<div style="border:1px solid">Click</div>
<span></span>
<div class="vis" style="display:none">Hello</div>
<script>
var visualEle = $('div.vis');
visualEle.css({border:"1px solid"});
$('a').on("click", function (e) { e.preventDefault();});
$('div').on("mousedown", mDown);
$('div').on("mouseup",mUp);
function mDown(e) {
e.preventDefault();
visualEle.css({ left: 100, top: 0, display: "block" });
}
function mUp(e) {
e.preventDefault();
$('span').append('mouse up triggerd<br/>');
return false;
}
$('p').on("click",dClick);
function dClick(e) {
$('span').append('double click triggerd<br/>');
}
</script>
In the above code the click event is not triggered after the mousedown is completed.
according to this document
The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released
in your case mouse point is over when mousedown happen but after that visualDiv moves under and mouse is released on this element.
possible solution I can think of thanks to #ArunPJohny is use $(this).trigger("click");
$('p').on("mousedown", function (e) {
_x = e.pageX;
_y = e.pageY;
visualDiv.css({
left: _x,
top: _y
});
$(this).trigger("click");
});
$('p').on("click", function (e) {
console.log(e.target)
});
Demo: http://jsfiddle.net/c5CRd/
How is it possible to detect with an eventListener when mousemove has finished?
document.AddEventListener('mousemove', startInteractionTimer, false);
function startInteractionTimer(){
clearInterval(touchInterval);
touchInterval = setInterval(noAction, 6000);
}
I want to start the function startInteractionTimer immediately after the mousemove has ended and I would like to catch that. On the code example above, it is starting if the mouse is moved.
Thanks
Edit: Alright, I answered my own question and the script above --^ is just fine.
You could always make a custom event for it:
(function ($) {
var timeout;
$(document).on('mousemove', function (event) {
if (timeout !== undefined) {
window.clearTimeout(timeout);
}
timeout = window.setTimeout(function () {
// trigger the new event on event.target, so that it can bubble appropriately
$(event.target).trigger('mousemoveend');
}, 100);
});
}(jQuery));
Now you can just do this:
$('#my-el').on('mousemoveend', function () {
...
});
Edit:
Also, for consistency with other jQuery events:
(function ($) {
$.fn.mousemoveend = function (cb) {
return this.on('mousemoveend', cb);
});
}(jQuery));
Now you can:
$('#my-el').mousemoveend(fn);
You could try setting/clearing a timeout solely to detect the end of moving the mouse...
var x;
document.addEventListener('mousemove', function() {
if (x) clearTimeout(x);
x = setTimeout(startInteractionTimer, 200);
}, false);
How long you want to wait is up to you. I don't know how long you want to say is "the end of a mousemove"
Example: http://jsfiddle.net/jeffshaver/ZjHD6/
Here is another custom-event solution, but without jQuery. It creates an event called mousestop which will be triggered on the element that the mouse pointer is on. It will bubble up like other mouse events.
So once you have that piece of code included, you can add event listeners to any element with addEventListener('mousestop', fn):
(function (mouseStopDelay) {
var timeout;
document.addEventListener('mousemove', function (e) {
clearTimeout(timeout);
timeout = setTimeout(function () {
var event = new CustomEvent("mousestop", {
detail: {
clientX: e.clientX,
clientY: e.clientY
},
bubbles: true,
cancelable: true
});
e.target.dispatchEvent(event);
}, mouseStopDelay);
});
}(1000));
// Example use
document.getElementById('link').addEventListener('mousestop', function(e) {
console.log('You stopped your mouse while on the link');
console.log('Mouse coordinates are: ', e.detail.clientX, e.detail.clientY);
// The event will bubble up to parent elements.
});
<h1>Title</h1>
<div>
content content<br>
<a id="link" href="#">stop your mouse over this link for 1 second</a><br>
content content content
</div>
How do I attach html-element to mouse cursor using jQuery. This should be something like 'draggable', but I want that element clung to the cursor after mouse double-click and to follow the cursor until the left mouse button is pressed.
You'll want to use .mousemove() and .offset().
$("#clickedElement").dblclick(function () {
var $someElement = $("#elementToCling");
$(document).mousemove(function (e) {
$someElement.offset({ top: e.pageY, left: e.pageX });
}).click(function () {
$(this).unbind("mousemove");
});
});
Working demo: http://jsfiddle.net/EbbxA/