本文共 1563 字，大约阅读时间需要 5 分钟。

当我们在处理网页中的点击事件时，有时会遇到事件冒泡和默认事件的问题。事件冒泡指的是当你对一个元素进行操作时，同一类型的事件也会自动触发到该元素的所有父级标签。例如，单击一个里面的元素，事件同样会传递给外面的中间盒子和外 EDGE盒子。默认事件则是系统自动执行的操作，比如在表单中提交数据时系统会默认打开一个新的页面。如果我们不希望这些事件发生，或者需要自定义处理，我们需要阻止默认事件和冒泡事件的执行。

在 jQuery 中，阻止事件冒泡和默认事件的执行非常方便。我们可以通过给标签的事件处理函数添加事件对象，并调用相应的方法来实现。具体来说：

此外，在 jQuery 中，我们还可以通过在事件处理函数中返回 false 来同时阻止所有事件的执行，包括事件冒泡和默认事件。不过需要注意的是，返回 false 会阻止所有后续操作，因此务必确保这个语句的位置正确。

以下是一个示例代码：

// 阻止冒泡事件和阻止默认事件的执行// 示例使用 jQuery 实现// 阻止冒泡事件$('.box').click(function(e) {    e.stopPropagation(); // 阻止冒泡事件的执行    console.log('您点击的是 .box 元素');});// 阻止冒泡事件$('.middle').click(function(e) {    e.stopPropagation(); // 阻止冒泡事件的执行    console.log('您点击的是 .middle 元素');});// 阻止冒泡事件$('.inner').click(function(e) {    e.stopPropagation(); // 阻止冒泡事件的执行    console.log('您点击的是 .inner 元素');});// 示例：form 表单的 submit 事件$('form').submit(function(e) {    let nameVal = $('input').val(); // 获取输入的值    if (nameVal !== '张三') { // 检查输入值是否为 "张三"        // 阻止表单的默认提交        e.preventDefault();         return; // 返回后续代码不会执行    }    // 如果账号密码正确，添加自定义提交逻辑    // 例如，发送 AJAX 请求    // const xhr = new XMLHttpRequest();    // xhr.open('POST', '/login', true);    // xhr.send(formData); // formData 是 FormData 对象    // xhr.onload = function() {};\n});

需要注意的是，在处理 form 表单的 submit 事件时，必须先调用 e.preventDefault()，以便阻止系统对默认提交事件的执行。如果需要对表单数据进行自定义处理（如发送 AJAX 请求），必须先阻止默认事件的执行。

通过以上方法，我们可以在网页开发中更好地控制事件的传播和默认行为，从而提高应用程序的稳定性和用户体验。

转载地址：http://rvaiz.baihongyu.com/