跳到主要内容

请说出JavaScript阻止事件冒泡的方法?

参考答案:

在JavaScript中,你可以使用event.stopPropagation()方法来阻止事件冒泡。这是一个内建的方法,可以在事件处理函数中使用。当调用这个方法时,它会阻止当前事件进一步向上传播到DOM树中的父元素。

以下是一个例子,其中点击<div>元素时,只会触发divClick函数,而不会触发bodyClick函数:

document.body.addEventListener('click', bodyClick);
document.querySelector('div').addEventListener('click', divClick);

function bodyClick(event) {
    console.log('Body clicked');
}

function divClick(event) {
    console.log('Div clicked');
    event.stopPropagation();
}

在这个例子中,如果你点击<div>元素,只会在控制台中看到"Div clicked",而不会看到"Body clicked",因为event.stopPropagation()阻止了事件冒泡到<body>元素。

需要注意的是,event.stopPropagation()只会阻止事件冒泡,不会阻止事件在同一元素上的其他事件处理函数被触发。如果你希望阻止同一元素的其他事件处理函数被触发,可以使用event.stopImmediatePropagation()