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.
Related
I am trying to make a site that counts each time the user has clicked their mouse. I have that part down, but I also need to include a reset button that, after the user clicks it, starts the mouse click counter back from 0.
I cannot figure it out - if I move the var = 0 about the doc ready, it resets, but after the button is clicked, the counter never goes past 1. I am not sure what to do.
My script -
$(document).ready(function(){
console.log("Here");
$(document).click(function(e) {
$('#location').append("("+e.clientX+", "+e.clientY+")<br>");
});
var counter = 0;
$(document).click(function(e) {
counter++;
$("#mouseclick").text("Total mouse clicks: " + counter);
});
$('button').click(function(e) {
e.stopPropagation(); // stop the event from propagating up the visual tree
$('#location').text("");
$("#mouseclick").text("Total mouse clicks: 0");
});
$('button')
});
I need them to be able to click 'button' and the count will reset. Any advice?
You're not resetting the counter. See this fiddle
$(document).ready(function(){
console.log("Here");
$(document).click(function(e) {
$('#location').append("("+e.clientX+", "+e.clientY+")<br>");
});
var counter = 0;
$(document).click(function(e) {
counter++;
$("#mouseclick").text("Total mouse clicks: " + counter);
});
$('button').click(function(e) {
e.stopPropagation(); // stop the event from propagating up the visual tree
$('#location').text("");
counter = 0;
$("#mouseclick").text("Total mouse clicks: 0");
});
Just add counter=0 in $('button').click() event.
$('button').click(function(e) {
counter=0;
e.stopPropagation(); // stop the event from propagating up the visual tree
$('#location').text("");
$("#mouseclick").text("Total mouse clicks: 0");
});
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 have a map with some pinpoints that, if you click on them show some information. The plan was, that I can click a Icon and it shows a div, if I now click the same icon the div will disapear.
As long as i got show() it works but if I put in fadeIn() it reapears on the second click.
Here my script so far
<script type="text/javascript">
jQuery(document).ready(function() {
$(".icon-location").on('click', function(event){
$('[id^="ort-box-"]').fadeOut('slow');
});
var mouseX;
var mouseY;
$(document).ready(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".icon-location").on('click', function(event){
var currentId = $(this).attr('id');
$("#ort-box-"+currentId).show().css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
});
});
</script>
EDIT:
Thanks to Max I got something startet but there is some logic mistake I must have made.
$(".icon-location").on('click', function(event){
$('[id^="ort-box-"]').fadeOut('slow');
if(!$(this).hasClass('ortActive')){
var currentId = $(this).attr('id');
$("#ort-box-"+currentId).fadeIn('slow').css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
$(this).addClass('ortActive');
}else {
$(this).removeClass('ortActive');
}
});
You're attaching 2 eventhandlers on the same DOM element.
So if you click on it, both handlers will fire the event and both functions will be called.
Maybe use something like
$(this).addClass('active');
if you trigger the event for the first time, check when you press again with
if($(this).hasClass('active')){ ...
$(this).removeClass('active');
}
This way you can be sure, that you can trigger only the wanted parts of the event handlers.
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');
});
});
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/