I want to create a swipe slide on mousedown event and mousemove, but on mouseup I want to stop the mousemove event.
slide.addEventListener("mousedown", e => {
console.log(e.clientX);
});
slide.addEventListener("mousemove", function move(e) {
// do Somthing
});
slide.addEventListener("mouseup", function stop(e) {
// stop the mousemove event
});
Try adding and removing the listener when you need:
function move(e) {
// do Somthing
}
slide.addEventListener("mousedown", e => {
console.log(e.clientX);
slide.addEventListener("mousemove", move);
});
slide.addEventListener("mouseup", function stop(e) {
slide.removeEventListener("mousemove", move);
});
Stopping mousemove is simple, just calling the slide.removeEventListener("mousemove", "function you're calling under mousemove");
just call it into the method you want to stop it
Use a flag in the common scope. Set it to true in mousedown and false in mouseup. Check it in mousemove
var pressing = false;
slide.addEventListener("mousedown", e => {
pressing = true;
});
slide.addEventListener("mousemove", function move(e) {
if (pressing) {
// do something only if mouse button is being pressed
}
});
slide.addEventListener("mouseup", function stop(e) {
pressing = false;
});
Why not just remove the event listener?
slide.addEventListener("mouseup", function stop(e) {
slide.removeEventListener("mousemove", function move(e) {});
});
Related
I have the following event listener for an object.
canvas.on('touch:longpress', (e) => {
// Some Code
});
This listener is called after the long press and called for "touch up" event as well. Why is this happening and how can this be bypassed?
var isTouching = false;
canvas.on('mouse:down', function (e) {
console.log('touchstart');
isTouching = true;
});
canvas.on('touch:longpress', function (e) {
if (isTouching) {
// Some Code
console.log('longpress');
}
});
canvas.on('mouse:up', function (e) {
console.log('touchend');
isTouching = false;
});
You can solve this situation with a boolean variable.
on clicking the outside the window the mousemove event has to be stopped`,i have detected the click outside the window on mouseleave,but how to prevent the default even?in Javascript
onTextContainerMouseLeave: function (e) {
if (this.curDown == true) {
var value;
$(window).on('mouseup', function (e) {
this.curDown = false;
e.preventDefault();
e.stopPropagation();
return false;
});
}
},
Put a condition inside your on-click that is true if the mouse was inside the control (which you already have according to what is written). If the condition is true then go on with the on-click events. Otherwise nothing happens.
$(window).on('mouseup', function (e) {
if (yourconditionhere) {
//Execute your code here --
}
});
I have to implement mouse move event only when mouse down is pressed.
I need to execute "OK Moved" only when mouse down and mouse move.
I used this code
$(".floor").mousedown(function() {
$(".floor").bind('mouseover',function(){
alert("OK Moved!");
});
})
.mouseup(function() {
$(".floor").unbind('mouseover');
});
Use the mousemove event.
From mousemove and mouseover jquery docs:
The mousemove event is sent to an element when the mouse pointer moves inside the element.
The mouseover event is sent to an element when the mouse pointer enters the element.
Example: (check console output)
$(".floor").mousedown(function () {
$(this).mousemove(function () {
console.log("OK Moved!");
});
}).mouseup(function () {
$(this).unbind('mousemove');
}).mouseout(function () {
$(this).unbind('mousemove');
});
https://jsfiddle.net/n4820hsh/
In pure javascript, you can achieve this with
function mouseMoveWhilstDown(target, whileMove) {
var endMove = function () {
window.removeEventListener('mousemove', whileMove);
window.removeEventListener('mouseup', endMove);
};
target.addEventListener('mousedown', function (event) {
event.stopPropagation(); // remove if you do want it to propagate ..
window.addEventListener('mousemove', whileMove);
window.addEventListener('mouseup', endMove);
});
}
Then using the function along the lines of
mouseMoveWhilstDown(
document.getElementById('move'),
function (event) { console.log(event); }
);
(nb: in the above example, you don't need the function - you could call it as mouseMoveWhilstDown(document.getElementById('move'), console.log), but you might want to do something with it other than output it to the console!)
I know that this issue was submitted and resolved approximately seven years ago, but there is a simpler solution now:
element.addEventListener('mousemove', function(event) {
if(event.buttons == 1) {
event.preventDefault();
// Your code here!
}
});
or for touch compatible devices:
element.addEventListener('touchmove', function(event) {
if(event.touches.length == 1) {
event.preventDefault();
// Your code here!
}
}
For more information on MouseEvent.buttons, click here to visit MDN Web Docs. Touch compatible devices, however, tend to listen to TouchEvents instead of MouseEvents. TouchEvent.touches.length achieves a similar effect to MouseEvent.buttons.
To provide an example, I used the following code to move an element I created. For moving an element, I used the 'mousemove' event's MouseEvent.movementX and MouseEvent.movementY to simplify the code. The 'touchmove' event does not have these so I stored the previous touch coordinates and cleared them on 'touchstart'. You can do something similar for the 'mousemove' event if desired, as the movementX and movementY values may vary across browsers.
document.addEventListener('DOMContentLoaded', () => {
var element = document.getElementById('box');
element.style.position = 'fixed';
// MouseEvent solution.
element.addEventListener('mousemove', function(event) {
if(event.buttons == 1) {
event.preventDefault();
this.style.left = (this.offsetLeft+event.movementX)+'px';
this.style.top = (this.offsetTop+event.movementY)+'px';
}
});
// TouchEvent solution.
element.addEventListener('touchstart', function(event) {
/* Elements do not have a 'previousTouch' property. I create
this property during the touchmove event to store and
access the previous touchmove event's touch coordinates. */
delete this.previousTouch;
});
element.addEventListener('touchmove', function(event) {
if(event.touches.length == 1) {
event.preventDefault();
if(typeof this.previousTouch == 'object') {
this.style.left = (this.offsetLeft+event.touches[0].pageX-this.previousTouch.x)+'px';
this.style.top = (this.offsetTop+event.touches[0].pageY-this.previousTouch.y)+'px';
}
this.previousTouch = {
x: event.touches[0].pageX,
y: event.touches[0].pageY
};
}
});
});
#box {
width: 100px;
height: 100px;
padding: 1ch;
box-sizing: border-box;
background-color: red;
border-radius: 5px;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box">Drag Me!</div>
</body>
</html>
Hopefully this solution is helpful to you!
The default behaviour will stop mouseMove and mouseUp from running, you can solve this by basically adding event.preventDefault() to the mousedown function
please ensure that you use the same parameter name passed in the mousedown function to trigger the preventDefault() if not it will not work , in the example below i passed event as the parameter to the mousedown function and then triggered preventDefault() by typing event.preventDefault()
let sliderImages = Array.from(document.getElementsByClassName('slidess'));
const sliderPos = sliderImages.forEach( function (slide, index) {
let mousePosStart, isDown = false;
slide.addEventListener('mousedown', mousedown)
slide.addEventListener('mousemove', mousemove)
slide.addEventListener('mouseup', mouseup)
function mousedown(event) {
if (isDown == false) {
mousePosStart = event.pageX - this.offsetLeft;
isDown = true;
event.preventDefault();
}
}
function mousemove(event) {
if (isDown == true) {
let mousePosMove = event.pageX - this.offsetLeft;
}
}
function mouseup(event) {
if (isDown === true) {
isDown = false;
let mousePosEnd = event.pageX - this.offsetLeft;
}
}
});
I have an event handler attached to touchstart and I want to call preventDefault as soon as touchmove occurs. I have this code currently.
link.addEventListener("click", function () {
console.log("clicked");
});
link.addEventListener("touchstart", function (touchStartEvent) {
var mouseMoveHandler = function () {
console.log("moved.");
touchStartEvent.preventDefault(); // This does not work.
link.removeEventListener('touchmove', arguments.callee);
};
link.addEventListener("touchmove", mouseMoveHandler);
});
http://jsfiddle.net/682VP/
I'm calling preventDefault for touchstart within an event handler for touchmove. This does not seem to work because the click event handler is always invoked.
What am I doing wrong here?
When you call preventDefault it works for touchstart event, not for click event.
You can add some property for the link object indicating the moving state and check it inside click handler itself (and stop it either by preventDefault or return false)
var link = document.getElementById("link");
link.addEventListener("click", function () {
if (this.moving) {
this.moving = false;
return false;
}
console.log("clicked");
});
link.addEventListener("touchstart", function (touchStartEvent) {
var mouseMoveHandler = function () {
console.log("moved.");
this.moving = true;
link.removeEventListener('touchmove', arguments.callee);
};
link.addEventListener("touchmove", mouseMoveHandler);
});
I want to bind two mouse events to a function (mousedown and moucemove). But I want to run the function only if both events are fired.
This will bind each event to to the function: (It's not what i want)
$("#someid").bind("mousedown mousemove", function (event) { someFunction(); });
I can do this and it works:
$("#someid").bind("mousedown", function (event) {
someFunction();
$("#someid").bind("mousemove", function (event) {
someFunction();
});
});
$("#someid").bind("mouseup", function (event) {
$("#someid").unbind("mousemove");
});
Is there a better, quicker way to do this???
Bind only to the mousemove event. If the left mouse button is pressed while you move, event.which will be 1.
$(document).on('mousemove', function(e) {
if (e.which == 1) {
//do some stuff
}
});
I guess you want the mousemove handler work only when the mouse button is pressed down? If so, I'd suggest using some kind of boolean flag. You toggle its state on mousedown and mouseup events:
var flag = false;
$('#someid')
.on('mousedown', function(e) {
flag = true;
})
.on('mouseup', function(e) {
flag = false;
})
.on('mousemove', function(e) {
if (!flag) {
return false;
}
// else... do your stuff
});