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);
});
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.
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) {});
});
I have an onclick event and when i click on an object, i notice that if i use a console.log to check if i clicked, each click gives about 6 "hits" for the one click, how can i stop the propagation of clicks after the first so that only the event is only triggered once per click?
var that = this;
var keys = [];
var click = false;
var canvas;
var mEvent = null;
document.addEventListener('mousedown', function (e) {
e.stopPropagation();
e.preventDefault();
that.mEvent = e;
that.click = true;
});
document.addEventListener('mouseup', function (e) {
e.stopPropagation();
e.preventDefault();
that.click = false;
});
function mousedown() {
return click;
}
That should not happen. Make sure you are not registering these events from a function and calling that function multiple times.
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
});
I would like to stop my event after sayHello1
var sayHello1 = function(e) {
console.log("hello1");
e.stopMe = true;
e.preventDefault(); // doesn't work
e.stopPropagation(); // doesn't work
return false; // doesn't work
};
var sayHello2 = function(e) {
console.log("hello2"); // Still fired !
if (e.stopMe ) console.log("stop hello2"); // works
};
document.addEventListener("click", sayHello1);
document.addEventListener("click", sayHello2);
"e.stopMe" cant help to stop sayHello2, but there is no way to do that ! (imagine firefox & Co using the name "stopMe" on their browser !)
You want to use e.stopImmediatePropagation() which prevents other listeners of the same event from being called.
var sayHello1 = function(e) {
console.log("hello1");
e.stopImmediatePropagation(); //keeps any event listener that is bound after this from firing
e.preventDefault(); // prevents the default action from happening
e.stopPropagation(); // prevents ancestors from getting the event
return false; // works like preventDefaut
};
var sayHello2 = function(e) {
console.log("hello2"); // Still fired !
};
document.addEventListener("click", sayHello1);
document.addEventListener("click", sayHello2);
<h1>Test</h1>