Question

我正在尝试检测mouseup（释放鼠标按钮）何时发生在触发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 = "";
    }
});

我为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);
});

Answer 2

如果我理解得很清楚你可以使用这种类型的捕捉鼠标整个文件，并检查目标是否是这样，然后决定你想要什么。

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

希望得到这个帮助。

检测mousedown元素之外的mouseup

2 个答案: