Losing MouseUp event if releasing not over the same element - javascript

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
}

Related

what is the name of event?

i wanna make event when i click on element and move cursor to another element then release cursor.
i made it using mouseup and mousedown events.
but some time mouseup not work!!!
the cursor change to hand and cant release it on another element.
for(var i=0;i<20;i++) {
for(var j=0;j<20;j++) {
var circle = document.createElement("div");
circle.setAttribute("class","circle");
circle.setAttribute("id",20*(i-1)+j);
circle.setAttribute("style","left:"+(35*(j+1)+20*j)+"px;top:"+(10*(i+1)+20*i)+"px;");
circle.addEventListener("mouseup",function() { ...});
circle.addEventListener("mousedown",function() { ...});
body.appendChild(circle);
}
}
If you mousedown and then mousemove away from the element, the mouseup event never fires.
Try adding preventDefault() to your mousedown handler...
circle.addEventListener("mousedown",function(e) { e.preventDefault(); ... });
You may also try binding the mouseleave event to trigger the mouseup

createjs prevent hyperlink interaction

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!

Programmatically call "mousemove" event in JS

Is there a possibility to programmatically call the mousemove event in jQuery?
Obviously, I'm not going to change the actual position of the cursor - it's impossible. All I want is re-call this event so all other scripts that have attached their handers to it will also be called.
To trigger event handlers bound to the mousemove event you can use trigger()
$('#elementID').on('mousemove', function() {
// do stuff
});
$('#elementID').trigger('mousemove'); // triggers above event handler

jQuery mouseup not firing after drag off link

See this jsfiddle:
http://jsfiddle.net/CB87X/6/
Click and hold the button, drag off the button and release. As you can see, the mouseup event never fires if the mouse is not over the element when the mouse button is released. Thus, the styling in my example never changes back to its original. How do you fire the mouseup event if the mouse button is released when not over the clicked element?
Edit1: BTW I have looked at several solutions on this site, implemented them, and the mouseup event still did not fire.
The mouseup event is relative to where the pointer is and this is expected behaviour. If you want your button to style properly, bind the mouseleave event as well.
This should do the trick. If you left click on the button (.but) and drag off, you can mouseup anywhere on the page and still fire the click event. If you mouseleave the page 'body' and mouseup, the binded mouseleave event is unbinded.
$('.but').mousedown( function(e) {
if (e.which == 1) {
var $this = $(this);
$this.bind('mouseleave', function(){
$('body').one('mouseup', function() {
$this.click();
});
});
$this.mouseup(function() {
$(this).unbind('mouseleave');
});
}
});
Forked your exemple to provide a working example:
http://jsfiddle.net/67Rrs/2/
Once the button is mousedowned, an event is bound to the next mouseup, wherever it happens, that resets the style.
Just use $(document).on('mouseup dragend', somefunc);

Two jQuery Event Handlers - execute code when both are fired

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!");});

Categories

Resources