Cancel click event in the mouseup event handler

xiaotao131

于 2018-10-12 17:58:53 发布

阅读量195

点赞数 1

分类专栏： js 文章标签： mouseup trigger click javascript 阻止时间冒泡

js 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了JavaScript中事件监听器的事件捕获与冒泡阶段，通过实例展示了如何在按钮点击事件中使用mouseup与click事件，以及如何在捕获阶段注册监听器并阻止事件的传播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var btnElm = document.querySelector('button');

btnElm.addEventListener('mouseup', function(e){
    console.log('mouseup');
    
    window.addEventListener(
        'click',
        captureClick,
        true // <-- This registeres this listener for the capture
             //     phase instead of the bubbling phase!
    ); 
});

btnElm.addEventListener('click', function(e){
    console.log('click');
});

function captureClick(e) {
    e.stopPropagation(); // Stop the click from being propagated.
    console.log('click captured');
    window.removeEventListener('click', captureClick, true); // cleanup
}