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);
Related
i have:
<input type="text" />
and
$('input').blur(function(){
alert('stay focused!');
});
I want to prevent the blur function running when I'm "blurring" by clicking on an anchor element.
I.E. if i tab to another input, click somewhere on the page etc i want the blur to fire, but if i click a link, I don't want it to fire.
Is this easily achievable, or do i need to hack about with delegates and semaphores?
Thanks
I had to solve this problem myself today, too. I found that the mousedown event fires before the blur event, so all you need to do is set a variable that indicates that a mousedown event occurred first, and then manage your blur event appropriately if so.
var mousedownHappened = false;
$('input').blur(function() {
if(mousedownHappened) // cancel the blur event
{
alert('stay focused!');
$('input').focus();
mousedownHappened = false;
}
else // blur event is okay
{
// Do stuff...
}
});
$('a').mousedown(function() {
mousedownHappened = true;
});
Hope this helps you!!
If you want to keep the cursor at its position in a contenteditable element, simply:
$('button').mousedown(function(){return false;});
Delay the blur a bit. If the viewer clicks a link to another page, the page should change before this code gets a chance to run:
$('input').blur(function(){
setTimeout(function() {alert('stay focused!');}, 1000);
});
You can experiment with what delay value for the timeout seems appropriate.
You can get this behavior by calling preventDefault() in the mousedown event of the control being clicked (that would otherwise take focus). For example:
btn.addEventListener('mousedown', function (event) {
event.preventDefault()
})
btn.addEventListener('click', function(ev) {
input.value += '#'
input.setSelectionRange(ta.value.length, ta.value.length)
})
See live example here.
Some clarification that was too long to put in a comment.
The click event represents both pressing the mouse button down, AND releasing it on a particular element.
The blur event fires when an element loses focus, and an element can lose focus when the user "clicks" off of the element. But notice the behavior. An element gets blurred as soon as you press your mouse DOWN. You don't have to release.
That is the reason why blur gets fired before click.
A solution, depending on your circumstances, is to call preventDefault on mousedown and touchstart events. These events always (I can't find concrete documentation on this, but articles/SO posts/testing seem to confirm this) fire before blur.
This is the basis of Jens Jensen's answer.
for arcane reasons I need to be able to cancel the click event via the mousedown event.
Briefly; I am creating a context menu in the mousedown event, however, when the user clicks on the page the context menu should disappear.
I am not able to use the mousedown event over the click in that scenario as I want the user to be able to click links inside the menu ( a full click would never travel to the <a> based menu elements ).
If it is any help, jQuery can be applied.
I would like to either be able to prevent the click event from happening from within the initial mousedown, or be able to pass information to the click event (via originalEvent or otherwise).
TIA
Seems to be impossible, neither FF nor Opera didnt cancel upcoming click when prevented in mousedown and/or mouseup (as side note: click is dispatched after mouseup if certain conditions met). testcase: http://jsfiddle.net/ksaeU/
I have just had the exact same problem. I fixed my context menu by closing it on mousedown and eating the mousedown event on the menu so that I can still receive clicks on the menu, like so:
$(document).one('mousedown.ct', null, function() { cmenu.hide(); return false; });
cmenu.bind('mousedown', function(e) { e.stopImmediatePropagation(); });
And in the hide() function I unbind the mousedown.ct again, in case it was closed due to a click on an item.
Hey, I think this is what you are trying to do with your code. If not, I apologize, I may have misunderstood the question. I used jQuery to get it done: http://jsfiddle.net/jackrugile/KArRD/
$('a').bind({
mousedown: function(){
// Do stuff
},
click: function(e){
e.preventDefault();
}
});
I have a link which has mousedown and mouseup handlers to animate some objects on page.
When dragged (drag and drop) link fires mousedown event but it doesn't fire mouseup when released. is there a workaround for this problem?
Here is a example, if you click link normally it works but when you drag the link mouse up doesn't happen:
http://jsfiddle.net/hL3mg/1/
Handling drags
Something crucial nobody mentions here is that there actually is an event to register the end of a drag, which as explained by the other answers is what's happening here. The event is called dragend, so you can simply do
$("a").on("dragend",function(){
console.log("Drag End");
});
To register the end of the drag. The disadvantage of this is that you will still see a drag interface (in other words: the browser will show some UI to notify the user he's draggin).
Registering mouse up's
Note from 2020: This isn't a good answer, but I am not familiar anymore with jQuery, so can't update it well. I would guess that event.preventDefault() on the dragstart might or might not be relevant.
There is however also a way to register the sought after mouse ups, simply cancel the drag behaviour by returning false in the click event listener, and then register the mouseup on the document.
$("a").mousedown(function(){
console.log("Mouse Down");
return false;
});
$(document).mouseup(function(){
console.log("Mouse Up");
});
The only remark that I do feel like I have to make is that in a stand alone jsfiddle this worked perfectly, in my own code it did not, so I am listening for both the mouseup and the dragend just to be sure.
What I did to solve this is associate an "mouseOut" event to every link and check if any link has been pressed. If it did, the mouseOut would fix the positioning of the link. Here's the code:
var mouse_button = false;
$('a')
.mousedown(function(){
$(this).css('top', '+=2');
mouse_button = true;
})
.mouseup(function(){
$(this).css('top', '-=2');
mouse_button = false;
})
.mouseout(function(){
if (mouse_button) {
$(this).css('top', '-=2');
mouse_button = false;
}
});
It seems that the mouseup event won't be fired because your mouse has left the link when you release the left button.
From http://www.quirksmode.org/js/events_mouse.html :
Suppose the user depresses the mouse
button on a link, then moves his mouse
off the link and then releases the
mouse button. Now the link only
registers a mousedown event.
Maybe you can do this to walkaround:
register mousedown event for a link
register mouseup event for the whole document
when the link fire mousedown event , then the document fire mouseup event, you can think that link is firing mouseup event
What you described is by conscious design.
It has always been the intent that if you mouse down on a link, a button, whatever and change your mind before you've mouse up, you can move the cursor off the link or button and then release the mouse button and the action - the link, button, whatever - will not occur.
It is by design that the mouse up is not sent to the object which received the mouse down if the cursor is moved off the item before mouse up.
This is a user interface design consideration. This is why you should program such that it takes a click to initiate just about any action - not just a mouse down.
I grant you that there may be times where you want to take action on a mouse down, such as in dragging, but it is the exception and when done properly, the mouse up will be seen - except in some versions of IE when the mouse up will be lost if you drag the cursor off the page - to the top, left or right.
If you want to move things around and be able to see the mouse up, it is far better to use divisions or such than things like links.
Links are intended to be just that: link to something. Yes, you can code JavaScript to be executed when the link is clicked - href="javascript:someFunction();" or you can code onclick to execute something or even mouse up over down out. However, the link is intended to do something not to be dragged around.
Use a division or a span and move it around.
Bob
If you look closely at what the browser does, it "drags" the DOM object, in my case a link, upon release the mouseup event does not fire for the DOM object (underneath the mouse, when dragged) or the document (it doesn't seem to bubble).
adding draggable="false" attr helps ...
link
however, there is still an issue of the user highlighting/selecting something with their cursor and dragging the selected element(s).
Using the mouseout event also helps.
If you need to handle dragging in jQuery why not use Draggable?
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
}
I have a CSS button that has normal, pressed and hover states. Everything works fine except that when the click has happened, I need to somehow know whether the style should be set to normal or hover. That is, I need a way of knowing if the mouse cursor is still hovering the element. How would one achieve this with JavaScript?
If you're concerned about the user doing a mousedown, then moving the pointer off (and perhaps on again) the button, you could do something like this:
EXAMPLE: http://jsfiddle.net/7zUaj/1/
var mouseIsDown = false; // Track/remember mouse up/down state for the button
// Handle mouseenter and mouseleave
$('div').hover(function() {
$(this).addClass('hover');
if (mouseIsDown)
$(this).addClass('pressed'); // If mouse button was down, and user exited
// and reentered the button, add "pressed"
}, function() {
$(this).removeClass('hover pressed'); // Remove both hover and pressed when
// the pointer leaves the button
})
// Handle the mousedown, track that it is down, and add "pressed" class
.mousedown(function() {
mouseIsDown = true;
$(this).addClass('pressed');
})
// Handle the mouseup, track that it is now up, and remove the "pressed" class
.mouseup(function() {
mouseIsDown = false;
$(this).removeClass('pressed');
});
// If user does mousedown, leaves the button, and does mouseup,
// track that it is now up
$(document).mouseup(function() {
mouseIsDown = false;
});
The state of the mouse is tracked in a variable and set in the button's handlers for mousedown and mouseup. The mouseup is also tracked at the document level. This will help the mouseenter part of the .hover() to know if it should set the pressed class or not.
(Note that because the mouseup is also tracked on the document, if there are any other elements on the page that stop the event from bubbling, the mouseup would not be detected by the document.)
EDIT: Made it so the document only tracks mouseup, and the button tracks both.
You don't have a :visited state in your CSS? As for Javascript, OnMouseOver or JQuery mouseover, hover or mouseenter (depending on what you want to do) will tell you when the hover is happening.