javascript - 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'); 中删除类 -loading，您的代码就可以工作。

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

参见:MDN: Pointer Events .