在 mousedown 元素之外检测 mouseup答案

【问题标题】：detect mouseup outside of mousedown element在 mousedown 元素之外检测 mouseup
【发布时间】：2023-03-30 22:49:01
【问题描述】：

我试图检测 mouseup（释放鼠标按钮）何时发生在触发 mousedown 事件的元素之外。我有几个按钮，我通过 mousedown（按下按钮）和完成单击（mousedown+mouseup）来更改 CSS（通过使用类）。问题是，如果您单击元素然后在元素外部释放鼠标按钮，则 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 元素外释放鼠标按钮时触发，因为警报不会发生。

【问题讨论】：

你已经明白了，mousedown / mouseup 事件不是那样工作的，所以你必须想出一些其他的方法来做你想做的任何事情。这是一个可以玩的小提琴 -> jsfiddle.net/xQamz

标签： jquery mousedown mouseup

【解决方案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);
});

【讨论】：

锚元素想要一个实际的 URL。该代码只是将井号作为占位符。外围的 div.qbuttons 包含一个或多个锚元素。
好吧@Joe 现在这里是更奇怪的地方。我已经修改了您的 JS Fiddle 代码，使其更接近于我的结构，并且您的代码仍然有效。我已将我的代码修改为更类似于您的代码，但我的代码仍然无法正常工作。这应该是一个简单的按钮效果，我使用的是 jQuery，因为 Internet Explorer 没有正确实现 :active 伪类，我可以让它为我工作。 Grr。这是我目前所拥有的：jsfiddle.net/hairydogdigital/R6bq3/10

【解决方案2】：

如果我理解得很好，您可以使用这种类型的 mouseup 整个文档并检查内部是否是目标，然后决定您想要什么。

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

希望对您有所帮助。

【讨论】：