I'd like to cancel the MouseEvent that is fired on object:moving in fabric.js, to prevent all the actions when some condition is met. I tried to set cancelBubble = true or simply return false; but with no success. Any ideas?
Sample fiddle with some event:
http://jsfiddle.net/fabricjs/S9sLu/
Mouse mouse:moving event is continuosly fired while mouse pointer is on canvas. But by checking event.target you can check if that's a generic or object related move.
canvas.on('mouse:move', function(options) {
if(options.target) {
//suppress event handlers here
}
});
Related
In my simple application canvas wrapped by hyperlink. Some objects, which are placed on canvas stage have special mouse interaction on click event. Is there any possible solutions to prevent hyperlink jumping by clicking on objects with my mouse click event listeners?
Normally you can just call preventDefault on the generated mouse event, and it will stop the link event from firing.
element.addEventListener("click", function(e) {
e.preventDefault();
}, false);
This is not possible using EaselJS because although you can access the nativeEvent on any EaselJS mouse event, EaselJS doesn't use the "click" event at all (and instead uses a combination of "mousedown" and "mouseup"). So preventing default on a click event will do nothing.
Doesn't work
// You would expect this to work.
myShape.on("click", function(e) {
e.nativeEvent.preventDefault(); // Nothing. This cancels a "mouseup" instead.
});
Workaround
However, you can work around this pretty easily. Set a flag on the clicked item (or wherever you would set it in your application) any time it is clicked.
myShape.addEventListener("click", function(event) {
myShape.clicked = true;
}, false);
Then, listen for the canvas click event yourself, check and check the flag. Make sure to reset it after. This is possible because "click" is always fired after "mouseup"
stage.canvas.addEventListener("click", function(event) {
if (myShape.clicked) { event.preventDefault(); }
myShape.clicked = false;
}, false);
Here is a quick fiddle showing it working. http://jsfiddle.net/buqkvb1u/
We are looking to see if this makes sense to handle in EaselJS. Thanks for your report!
I have a click event handler and a mousedrag event handler for a Paper.js Item.
item.on('click', function(event) {
event.stopPropagation();
event.preventDefault();
//...
});
item.on('mousedrag', function(event) {
event.stopPropagation();
event.preventDefault();
//...
});
Whenever I cause a mousedrag event a click event is also generated. How can I prevent this?
When the mouse is clicked then released a click event is generated. When the mouse is held down and dragged, drag events are generated. I generally implement this by setting events on 'mousedown' and 'mouseup' in addition to 'mousedrag'.
Playing around I've found that if you return false from your 'mousedrag' event handler it will suppress further events, i.e., neither 'mouseup' nor 'click' will be invoked. Here's a sketch illustrating mouse events. If you uncomment the return false in the 'mousedrag' handler you will not get the 'mouseup' or 'click' events.
The following is example code for how I usually implement it - I didn't discover that returning false from the handler suppressed further processing until looking at the code tonight.
var drag;
view.on('mousedown', function(e) {
drag = false;
});
view.on('mousedrag', function(e) {
drag = true;
// do whatever else you need to when dragging the mouse
});
view.on('mouseup', function(e) {
// see if it was just a click and handle that
if (drag) {
// handle the end of a drag
} else {
// do whatever a click down/up without drag needs to do
}
});
I have created an app with three.js were there are 2 renderers (1 canvas and 1 div(css renderer)).
The css renderer is on top of the canvas and I would like to pass any type of event to the canvas element which is behind. So far I have failed to create a dispatcher...
What I have tried so far:
1)
// on top element css renderer
$(this.cssRenderer.domElement).on("click mousedown mouseup mousemove focus blur keydown keyup change touchstart touchend touchmove", function ( event ) {
event.preventDefault();
event.stopImmediatePropagation();
//canvas background domelement
$(that.renderer.domElement).trigger(event);
});
2)
$(this.cssRenderer.domElement).on("click mousedown mouseup mousemove focus blur keydown keyup change touchstart touchend touchmove", function ( event ) {
event.preventDefault();
event.stopImmediatePropagation();
that.renderer.domElement.dispatchEvent(event.originalEvent);
});
In case 2 I get the following error:
Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on
'EventTarget': The event is already being dispatched.
I also tried to copy the object or pass it after some timeOut but nothing seem to work.
I haven't done anything similar so I'd like a little help or some guidance.
You can't just pass event to your trigger function, as event is an object and trigger requires a string as an argument.
Instead, try passing event.type instead:
$(that.renderer.domElement).trigger(event.type);
Read up here.
JSFiddle (or with mouse coordinates)
To also pass mouse coordinates I am passing an object (mouse) as well as the event type.
I want to run some code when two event handlers are both triggered.
I've tried it like this:
$('#box').mousedown(function(){
$(document).bind('mousemove',function(e){
// more code here
});
});
But the code even works when I trigger mousedown once and move my mouse after that. I only want to execute the code when my mouse is down and it's moving.
How can I achieve that?
I think the problem you are having is with your understanding of the way the event handlers work, once you have added an event handler it will listen out for its event.
So your code will add an event handler to listen for mousedown when the dom is ready, once it occurs it will add an event for mousemove - the document now has both event handlers registered so it will do stuff for both independently.
What you want to do, is remove the event handler for the mousemove on the mouseup event. That way the document now no longer listens to the mousemove event handler because its been removed.
$('#box').mousedown(function(){
$(document).bind('mousemove',function(e){
// Do something:
});
});
$(document).mouseup(function(){
$(document).unbind('mousemove');
});
Here is a simple example, so you can see whats happening it will add a message under the box.
Try giving this a shot? Have a global variable that indicates whether the mouse is down or not. When they mousedown on the #box element the global variable is set to true. When they mouseup it's set back to false. See a live example here.
$(document).ready(function(){
var mouseDown = false;
$("#box").mousedown(function(){
mouseDown = true;
});
$(document).mouseup(function(){
mouseDown = false;
});
$(document).mousemove(function(){
if (mouseDown){
//do your stuff here
}
});
});
Use the
event.stop()
or
event.die()
snippet before use the event.
Example:
$("#mybutton").unbind("click");
$("#mybutton").die();
$("#mybutton").click(function(){ alert("Hy mate!");});
I have got a problem with a slider. When i grab the handler, i change the .src of the image, just to change its color. However, i want it to change back to the original color when i release the mouse button. I have tried two things.
1) Changing it back on the handler mouseup event: this works only if i release the button over the handler, so this is not a solution.
2)Changin it back on the window mouseup event: the event is not firing properly. If i click and release on any place of the window, the event fires normaly, but if i click in the handler, move the cursor to any other point of the window, and then release the button, the event will not fire.
Btw, im using the prototype js framework.
Solutions? Thanks
Here is the code. I load the handler function when the document is ready.
function handler()
{
var handler = $('handler');
Event.observe(window, "mouseup", function(){
alert('salta'); //to see when mouseup fires
if(handler.src=='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png'){ //orange
handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper.png';} //grey
});
Event.observe(handler,'mousedown',function(){handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png';}); //orange
}
You should be attaching the mouseup handler to the document object.
How about onmouseout event?
Here is the code. I load the handler function when the document is ready.
function handler()
{
var handler = $('handler');
Event.observe(window, "mouseup", function(){
alert('salta'); //to see when mouseup fires
if(handler.src=='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png'){ //orange
handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper.png';} //grey
});
Event.observe(handler,'mousedown',function(){handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png';}); //orange
}