拖动链接后jQuery mouseup不触发答案

【问题标题】：jQuery mouseup not firing after drag off link拖动链接后jQuery mouseup不触发
【发布时间】：2012-09-10 09:22:43
【问题描述】：

看到这个jsfiddle：

http://jsfiddle.net/CB87X/6/

单击并按住按钮，拖离按钮并释放。如您所见，如果释放鼠标按钮时鼠标不在元素上方，则不会触发 mouseup 事件。因此，我的示例中的样式永远不会变回原来的样式。如果鼠标按钮没有在被点击的元素上释放，你如何触发 mouseup 事件？

Edit1：顺便说一句，我在这个网站上查看了几个解决方案，并实施了它们，但 mouseup 事件仍然没有触发。

【问题讨论】：

请注意，这也是常规按钮的默认行为，至少在 chrome 中是这样。 Demo
点赞this way

标签： javascript jquery css mouseup

【解决方案1】：

mouseup 事件与指针所在的位置相关，这是预期的行为。如果您希望按钮样式正确，请同时绑定 mouseleave 事件。

【讨论】：

“以及”我假设您可以将两个事件绑定到一个选择器？如果是这样，你能告诉我怎么做吗？我只是添加一个单独的功能吗？
添加由space分隔的事件。 $(".but").bind("mouseup mouseleave",function() { ... }
+1 用于为这罐蠕虫提供开罐器（如果仅在按住按钮时放弃效果还不够，则必须管理鼠标叶和鼠标重新进入） 不过，谢谢。 :-)

【解决方案2】：

这应该可以解决问题。如果您左键单击按钮 (.but) 并拖动，您可以在页面上的任何位置mouseup 并仍然触发单击事件。如果您mouseleave 页面'body' 和mouseup，则binded mouseleave 事件是unbinded。

$('.but').mousedown( function(e) {
    if (e.which == 1) {
        var $this = $(this);
        $this.bind('mouseleave', function(){
            $('body').one('mouseup', function() {
                $this.click();
            });
        });
        $this.mouseup(function() {
            $(this).unbind('mouseleave');
        });
    }
});

【讨论】：

【解决方案3】：

分叉您的示例以提供一个工作示例：

http://jsfiddle.net/67Rrs/2/

一旦按钮是mousedowned，一个事件就会绑定到下一个mouseup，无论它发生在哪里，都会重置样式。

【讨论】：

【解决方案4】：

只需使用 $(document).on('mouseup dragend', somefunc);

【讨论】：