javascript - 拖动链接后jQuery mouseup不触发

Question

看到这个jsfiddle：

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

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

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

Answer 1

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

Answer 2

这应该可以解决问题。如果您左键单击按钮 (.but) 并拖动，您可以mouseup在页面上的任何位置触发单击事件。如果您mouseleave的页面“正文”和mouseup，则bindedmouseleave事件是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');
        });
    }
});

Answer 3

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

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

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

Answer 4

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