Mouseup 事件未使用函数内部代码触发

Question

我正在尝试使用 jQuery 创建按住确认按钮。问题是当我在此函数中插入代码时 mouseup 事件没有触发。它仅在函数为空且只有 console.log 时触发。这是示例：

self.on('mousedown touchstart', function(e) {
    e.preventDefault();
    self.addClass('-loading -progress');
    clickDuration = setTimeout(function(e) {
        self.trigger('click').removeClass('-progress');
        console.log('clicked for 2 seconds');
    }, parseInt(confirmDuration));
    console.log(e);
}).on('mouseup touchend', function(e) {
    self.removeClass('-loading -progress');
    clearTimeout(clickDuration);
    console.log(e);
});

mouseup不会触发。

self.on('mousedown touchstart', function(e) {
    e.preventDefault();
    console.log(e);
}).on('mouseup touchend', function(e) {
    console.log(e);
});

mouseup 会触发。

无论如何，我已经创建了我的代码的完整示例，您可以在这里现场使用它：https://jsbin.com/bozusiboku/1/edit?js,output

谢谢！

Answer 1

如果您从语句 self.addClass('-loading -progress');.

中删除 class -loading，则您的代码有效

-loading 添加了 CSS pointer-events: none，它会禁用按钮上的鼠标事件并阻止 mouseup 触发。

参见：MDN: Pointer Events。

Mouseup 事件未使用函数内部代码触发

Mouseup event not firing with code inside function

javascript

jquery

mouseup