鼠标向上事件未使用函数内部的代码触发

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

如果从语句中删除类-loading，代码将起作用self.addClass('-loading -progress');.

-loading添加了 CSSpointer-events: none，它禁用按钮上的鼠标事件并防止鼠标向上触发。

请参阅：MDN：指针事件。