除Firefox以外的所有浏览器中的Mouseup错误? [英] Mouseup bug in all browsers except Firefox?

问题描述

对于动态添加的元素(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: ');  
});

如果单击ul上的任何位置，将触发但不在滚动条上.除Firefox以外的所有浏览器都存在相同的问题.

在所有浏览器中，如果将"mouseup"替换为"mousedown"，也会在滚动条上触发.

再进行几次测试后，无论是否添加'ul'都没有什么区别，mouseup似乎并没有将滚动条识别为'ul'的一部分(FF除外).

同样的问题，如果用'div'替换'ul'，用'p'替换'li'.
<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: ');});

解决方案

是的.这是Chrome上的打开错误: http://code.google.com/p/chromium/issues/detail?id = 14204

在Webkit上: https://bugs.webkit.org/show_bug.cgi? id = 25811 和 https://bugs.webkit.org/show_bug.cgi ?id = 40648

Microsoft给出了一个极高的您不需要它"响应:

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: ');});

解决方案

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.

这篇关于除Firefox以外的所有浏览器中的Mouseup错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！