detect mouseup outside of mousedown element

Question

I am trying to detect when the mouseup (mouse button released) occurs outside of the element that the mousedown event was triggered on. I have several buttons that I alter the CSS (by using classes) with a mousedown (button press) and completion of click (mousedown+mouseup). Problem is that if you click on the element then release the mouse button outside of the element, that the mouseup does not fire. I've also tried capturing a general "mouseup" event on the document to "reset" the classes assigned to the element and that does not seem to work either.

Here is a sample HTML:

<div class="qbuttons">
<a id="qb_appointments" href="#" class="appointments"><div>
Schedule a Service<br />
Appointment</div></a>
</div>

Here is the jQuery that I am using to fiddle with the element:

var current_qbutton = "";

$('.qbuttons a').mousedown(function() {
    current_qbutton = $(this).attr('id');
    $(this).addClass('active');
});

$('.qbuttons a').click(function() {
    $(this).removeClass('active');
});

$('*').mouseup(function(event) {
    event.stopPropagation();
    alert(current_qbutton);
    if(current_qbutton != "") {
        $('#' + current_qbutton).removeClass('active');
        current_qbutton = "";
    }
});

I've tried different selectors for the mouseup -- document, window, ‘body *’, ‘html ’ and ‘’ -- from what I am seeing it appears that the mouseup is not firing on release of the mouse button outside of the mousedown element, because the alert does not happen.

You've figured it out, the mousedown / mouseup events don't work that way, so you'll have to figure out some other way to do whatever it is you're trying to do. Here's a fiddle to play with -> http://jsfiddle.net/xQamz/ — adeneo, Jul 02 '13 at 22:26

score 2 · Answer 1 · answered Jul 02 '13 at 22:41

2

The reason that this is not working is due to the anchor element (which does not seem to be serving a purpose). You can remove the a and replace it with a div or span or whatever else you like and then the mouseup event can be fired outside of the element.

This seems to be working for me. http://jsfiddle.net/FXnsx/3/

var current_button;
$('.test').on('mousedown', function(){
    current_button = this.id;
});
$(document).on('mouseup', function(){
    alert(current_button);
});

answered Jul 02 '13 at 22:41

Joe

6,401
3
28
32

The anchor element will like to an actual URL. The code just has the hash symbol in there as a placeholder. The outerlying div.qbuttons contains one or more of the anchor elements. – Rob Emenecker Jul 03 '13 at 19:43
Okay @Joe now here is where it is even stranger. I've modified your JS Fiddle code to more closely resemble my structure and your code still works. I've modified my code to more closely resemble your's and my code still does not work. This is supposed to be a simple button effect and I am using jQuery because Internet Explorer does not properly implement the :active pseudo-class in a way that I can get it to work for me. Grr. Here is what I currently have in place: http://jsfiddle.net/hairydogdigital/R6bq3/10/ – Rob Emenecker Jul 03 '13 at 20:20

score 0 · Answer 2 · answered Oct 22 '15 at 13:43

If I understood well you can use this type of catching mouseup entire document and check inside if the target this is or not then decide what do you want.

$(document).mouseup(function (e) {
 var buttons = $("#btn1, #btn2");
 if (!buttons.is(e.target) //clicking target is not the buttons
 {[desision 1] } 
 else 
 { [desision 2] }
});

Hope this help.

detect mouseup outside of mousedown element

2 Answers2