检测mousedown元素之外的mouseup

Question

我试图检测鼠标(释放鼠标按钮)何时发生在触发mousedown事件的元素之外.我有几个按钮,我改变CSS(通过使用类)与mousedown(按下按钮)和完成点击(mousedown + mouseup).问题是,如果单击元素,则释放元素外部的鼠标按钮,鼠标按钮不会触发.我还尝试在文档上捕获一般的"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 = "";
    }
});

我已经尝试了不同的鼠标选择器 - 文档,窗口,'body*','html '和' ' - 从我看到的东西看起来鼠标在释放鼠标按钮之外没有触发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);
});