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>
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 have circle menu with rotation. And after simple click i want to fire click event, but during rotation - mousemove i want ignore click. For now i have -
<g id="bottomMenuRotate" onMouseDown={this.selectElement.bind(this)}>
Then my select function looks -
selectElement(e){
let groupRotate = document.getElementById('bottomMenuRotate');
groupRotate.onmousemove = function(e) {....}
groupRotate.onmouseup = function(e){
groupRotate.onmousemove = null;
}
}
So how i cant prevent click? I tried something like
groupRotate.onmouseup = function(e){
e.stopPropagation();
groupRotate.onmousemove = null;
};
or
groupRotate.onmouseclick = function(e){
e.stopPropagation();
}
but this prevents every click. Any tips how i can do it?
So i finally found simply solution
selectElement(e){
let move = false;
groupRotate.onmousemove = function(e) {
move = true;
}
groupRotate.onclick = function(e){
move ? e.preventDefault() : false;
}
}
This prevent click only when move is set to true.
Set a state in your onMouseMove handler that prevents the click events from running:
groupRotate.onmousemove = (e) => {
this.setState({ mouseMoving: true });
}
groupRotate.onmouseup = (e) => {
this.setState({ mouseMoving: false });
}
Somewhere else:
groupRotate.onmouseclick = (e) => {
if (!this.state.mouseMoving) {
...
};
}
Note the arrow functions to make this available within the functions.
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 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
});