js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

在JavaScript中，阻止默认事件和阻止事件冒泡是常见的需求，它们分别用于控制浏览器对特定事件的默认行为（如点击链接时跳转、提交表单等）和防止事件进一步传播到父元素。下面我将分别给出这两个操作的示例代码。

### 阻止默认事件

阻止默认事件通常使用`event.preventDefault()`方法。这个方法会告诉浏览器不要执行与事件关联的默认动作。

// 假设我们有一个链接，点击时不希望它跳转
document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止链接的默认跳转行为
    console.log('链接被点击，但不会跳转');
});

### 阻止事件冒泡

阻止事件冒泡通常使用`event.stopPropagation()`方法。这个方法会阻止当前事件进一步传播到父元素。

// 假设我们有一个嵌套的div，点击内层div时不希望事件传播到外层div
document.getElementById('innerDiv').addEventListener('click', function(event) {
    event.stopPropagation(); // 阻止事件冒泡到外层div
    console.log('内层div被点击，事件不会冒泡');
});

// 外层div的点击事件
document.getElementById('outerDiv').addEventListener('click', function() {
    console.log('外层div被点击');
});

在上述示例中，点击`innerDiv`时，控制台会输出“内层div被点击，事件不会冒泡”，并且不会触发`outerDiv`的点击事件，因为事件冒泡被阻止了。而点击链接时，链接的默认跳转行为被阻止，控制台会输出“链接被点击，但不会跳转”。