Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mouseup bug in all browsers except Firefox?

Mouseup doesn't fire on scroll bar for elements dynamically added (except Firefox):

CSS:

#dBox {
    height: 100px;
    width: 230px;
    overflow - y: auto;
}

HTML:

<input type="text" id="s">

JQuery:

$(function() {
    $('#s').focus(function() {
        var $dbox = $('<ul id="dBox"></ul>');
        for (i = 0; i < 10; i++) $dbox.append('<li>' + i + '</li>');
        $(this).after($dbox);
        $dbox.bind("mouseup", function() {
            alert('in: ');
            //console.log ('in: ');  
        });
    });
});
// OR LIKE THIS
$('#s').focus(function() {
    var $dbox = $('<ul id="dBox"></ul>');
    for (i = 0; i < 10; i++) $dbox.append('<li>' + i + '</li>');
    $(this).after($dbox);

});
$('#dBox').live("mouseup", function() {
    alert('in: ');
    //console.log ('in: ');  
});

If you click anywhere on the ul will fire BUT not on scroll bar. The same problem exists in all browsers except Firefox.

If you replace 'mouseup' with 'mousedown' will fire on scroll bar also, in all browsers.

After few more tests it seems that it doesn't make a difference if the 'ul' it's added dinamically or not, the mouseup just doesn't seem to recognize the scrollbar as part of 'ul' (except FF).

And the same problem if you replace 'ul' with 'div' and 'li' with 'p'.
<div id="dBox" class="" ><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p></div>

$('#dBox').mouseup(function () {alert ('in: ');});

like image 779
silversky Avatar asked Nov 10 '10 14:11

silversky


1 Answers

Yup. Here's the open bug on Chrome: http://code.google.com/p/chromium/issues/detail?id=14204

And on webkit: https://bugs.webkit.org/show_bug.cgi?id=25811 and https://bugs.webkit.org/show_bug.cgi?id=40648

Here's a condescending "you don't need it" response from Microsoft: http://social.msdn.microsoft.com/Forums/en-US/netfxjscript/thread/3749b8a1-53ef-48fe-be81-b2df39d6154f/

That last thread brings up the possibility of using onscroll as a substitute for onmouseup. This may be a partial workaround.

like image 175
James Baker Avatar answered Sep 22 '22 11:09

James Baker