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?
Related
I tried to trigger mousedown event at the specific position using jQuery.
What I need is to implement mousedown event at the specified coordinates and mouseup event also.
So I am going to implement mouse drag event automatically when I click any button.
Is it possible on canvas?
This is my attempt
$('#clickMe').click(function() {
$("#map-canvas").trigger("mousedown", { which: 1, pageX: 1057, pageY: 770 });
$("#map-canvas").trigger("mouseup", { which: 1, pageX: 370, pageY: 541 });
$("#map-canvas").off("mousedown").on("mousedown", function (e) {
console.log('#### DEBUG CLICK: ', e);
});
$("#map-canvas").off("mouseup").on("mouseup", function (e) {
console.log('#### DEBUG CLICK EVENT: ', e); // fixme
});
});
Trigger`s action is okay.
But I can not mousedown event at the expectation position.
How can I implement it?
Thanks.
When I'm select text and start to drag selections, mouse event like a wheel or mousemove doesn't fire. How I can catch an event while dragging?
I create a test example to check this issue, you can see it here:
https://jsfiddle.net/prevolley/3q7xwa8p/4/
<p>dasdasdasdas</p>
document.addEventListener('wheel', (event) => {
console.log('wheel', event.deltaY);
});
document.addEventListener('mousemove', (event) => {
console.log('mousemove', event.pageX);
});
I want to catch a mouse event while I drag selected text.
An image where I show the problem:
you can use event drag:
document.addEventListener('drag', (event) => {
console.log('drag', event.pageX);
});
Text
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');
});
});
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 can I continuously get the position of the mouse whilst its button is being held down?
I know I can do:
<element onclick="functionName(event)"></element>
<script>
function functionName(e){
e.pageX
e.pageY
//do stuff
}
</script>
and I know you can use the onmousedown event, but how would I continuously get the position while the button is still held down?
Oddly I couldn't find this anywhere I looked.
Anyway, I'd suggest using mousemove event with check if which event property equals 1 (i.e. left mouse button pressed):
$("element").on("mousemove", function(e) {
if (e.which == 1) {
console.log(e.pageX + " / " + e.pageY);
}
});
DEMO: http://jsfiddle.net/HBZBQ/
Here is a JSFiddle for you. You need to store the state of the mouse button in a variable.
jQuery:
$(document).ready(function() {
$(document).mousedown(function() {
$(this).data('mousedown', true);
});
$(document).mouseup(function() {
$(this).data('mousedown', false);
});
$(document).mousemove(function(e) {
if($(this).data('mousedown')) {
$('body').text('X: ' + e.pageX + ', Y: ' + e.pageY);
}
});
});
Here, I'm storing the mouse button's up or down state in document using $(document).data(). I could have used a global variable, but storing it this way makes the code a little cleaner.
In your $.mousemove() function, only do what you want if the mouse is down. In the code above, I'm simply printing the mouse's position.