jquery - 检测 mousedown 元素之外的 mouseup

Question

我试图检测 mouseup(释放鼠标按钮)何时发生在触发 mousedown 事件的元素之外。我有几个按钮，我可以通过鼠标按下(按下按钮)和完成单击(鼠标按下+鼠标向上)来更改CSS(通过使用类)。问题是，如果您单击该元素，然后在该元素外部释放鼠标按钮，则 mouseup 不会触发。我还 try catch 文档上的一般“mouseup”事件来“重置”分配给该元素的类，但这似乎也不起作用。

这是一个 HTML 示例:

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

这是我用来摆弄元素的 jQuery:

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

我尝试了不同的 mouseup 选择器 - 文档、窗口、'body *'、'html ' 和 '' - 从我所看到的看来，mouseup 不是在 mousedown 元素外部释放鼠标按钮时触发，因为警报不会发生。

Answer 1

这不起作用的原因是由于 anchor 元素(它似乎没有达到目的)。您可以删除 a 并将其替换为 div 或 span 或您喜欢的任何其他内容，然后使用 mouseup事件可以在元素外部触发。

这似乎对我有用。 http://jsfiddle.net/FXnsx/3/

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