JavaScript

JavaScript 如何阻止事件冒泡和默认事件？

参考答案：

在JavaScript中，你可以使用事件对象的stopPropagation()和preventDefault()方法来阻止事件冒泡和默认事件。

阻止事件冒泡

事件冒泡是事件从最深层的节点（或目标节点）开始，然后逐级向上传播到DOM树的过程。你可以使用stopPropagation()方法来阻止事件冒泡。这个方法会阻止当前事件进一步向上传播到DOM树中的其他节点。

以下是一个简单的示例，其中点击<div>元素时，会阻止事件冒泡到<body>元素：

document.querySelector('div').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Div clicked!');
});

document.querySelector('body').addEventListener('click', function() {
  console.log('Body clicked!');
});

在这个示例中，当你点击<div>元素时，只会打印"Div clicked!"，而不会打印"Body clicked!"，因为stopPropagation()方法阻止了事件冒泡。

阻止默认事件

默认事件是浏览器对特定事件类型的默认行为。例如，点击一个<a>标签的默认行为是导航到其href属性指定的URL。你可以使用preventDefault()方法来阻止默认事件。

以下是一个简单的示例，其中点击<a>元素时，会阻止其默认行为（即导航到其href属性指定的URL）：

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Link clicked!');
});

在这个示例中，当你点击<a>元素时，只会打印"Link clicked!"，而不会导航到其href属性指定的URL，因为preventDefault()方法阻止了默认行为。