event.preventDefault()、event.stopPropagation()、event.stopImmediatePropagation()思考

最新推荐文章于 2023-10-30 20:41:05 发布
最新推荐文章于 2023-10-30 20:41:05 发布
阅读量2.6k 收藏 3
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28842789/article/details/105973286
版权

event.preventDefault()

MDN解释:

Event 接口的 preventDefault()方法，告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation() 或stopImmediatePropagation()，才停止传播。

个人理解：

事件后续动作别执行了，如submit触发函数加这么一句，就是别提交表单了，input的keydown事件触发函数加这么一句，就是别输入到文本框里面了。

<body>
<input type="text" onkeydown="test(event)"/>
<a href="http://www.baidu.com" onclick="test(event)">to baidu</a>
</body>
<script type="text/javascript">
      function test(e) {
        console.log("默认的动作不照常执行");
        e.preventDefault();
      }
</script>

在文本框输入，或点击超链接

 

stopPropagation、stopImmediatePropagation

因为有事件的冒泡和捕获，所以会有需要阻止的情况出现吧。（真是废话来的 - _ -，总之得先弄白冒泡和捕获吧。https://blog.csdn.net/qq_28842789/article/details/105975205）

event.stopPropagation()

MDN解释:

阻止捕获和冒泡阶段中当前事件的进一步传播。

<body onload="load();">
<div id="d1" style="width: 400px; height: 400px; border: solid 1px;">
    <div id="d2" style="width: 200px; height: 200px; border: solid 1px;">
        <div id="d3" style="width: 100px; height: 100px; border: solid 1px;">one</div>
    </div>
</div>
</body>

栗子1（冒泡阶段的阻断）

<script type="text/javascript">
      function load() {
        div1 = document.getElementById("d1");
        div2 = document.getElementById("d2");
        div3 = document.getElementById("d3");
        
        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于捕获阶段");
        }, true);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于捕获阶段");
        }, true);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于捕获阶段");
        }, true);

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于冒泡阶段");
        }, false);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于冒泡阶段");
          e.stopPropagation();
        }, false);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于冒泡阶段");
        }, false);
        
      }
    </script>

点击 d3 div 结果：捕获全部执行完，冒泡到div2时，最后一个div1的冒泡被阻止

栗子2（捕获阶段的阻断）

<script type="text/javascript">
      function load() {
        div1 = document.getElementById("d1");
        div2 = document.getElementById("d2");
        div3 = document.getElementById("d3");

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于捕获阶段");
        }, true);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于捕获阶段");
          e.stopPropagation();
        }, true);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于捕获阶段");
        }, true);

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于冒泡阶段");
        }, false);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于冒泡阶段");
        }, false);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于冒泡阶段");
        }, false);

      }
</script>

点击 d3 div 结果：执行到div2的捕获函数时，直接阻断了后面所有没执行的捕获和冒泡函数

event.stopImmediatePropagation()

MDN解释:

阻止事件冒泡并且阻止相同事件的其他侦听器被调用。（可能翻译不靠谱，其实在捕获阶段调用且后面的元素还有捕获函数，也不会执行了，个人理解：stopImmediatePropagation=stopPropagation+阻断目标元素其他未执行的同一事件监听函数）

<body onload="load();">
<div id="d1" style="width: 400px; height: 400px; border: solid 1px;">
    <div id="d2" style="width: 200px; height: 200px; border: solid 1px;">
        <div id="d3" style="width: 100px; height: 100px; border: solid 1px;">one</div>
    </div>
</div>
</body>

栗子1（冒泡阶段的阻断）

<script type="text/javascript">
      function load() {
        div1 = document.getElementById("d1");
        div2 = document.getElementById("d2");
        div3 = document.getElementById("d3");

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于捕获阶段");
        }, true);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于捕获阶段");
        }, true);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于捕获阶段");
        }, true);

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于冒泡阶段");
        }, false);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于冒泡阶段, 第1个监听函数");
        }, false);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于冒泡阶段, 第2个监听函数");
          e.stopImmediatePropagation();
        }, false);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于冒泡阶段, 第3个监听函数");
        }, false);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于冒泡阶段");
        }, false);

      }
    </script>

 点击 d3 div 结果：

栗子2（捕获阶段的阻断）

<script type="text/javascript">
      function load() {
        div1 = document.getElementById("d1");
        div2 = document.getElementById("d2");
        div3 = document.getElementById("d3");

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于捕获阶段");
        }, true);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于捕获阶段, 第1个监听函数");
        }, true);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于捕获阶段, 第2个监听函数");
          e.stopImmediatePropagation();
        }, true);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于捕获阶段, 第3个监听函数");
        }, true);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于捕获阶段");
        }, true);

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于冒泡阶段");
        }, false);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于冒泡阶段");
        }, false);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于冒泡阶段");
        }, false);

      }
    </script>

点击 d3 div 结果：一元素对同一事件的多个监听函数，按代码顺序执行，执行到div2的第二个监听函数，阻止了后面的函数执行。

 

向菜鸟开发迈进
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
wrap-prevent-default:包装事件处理程序，以便在可用时为您提供e.preventDefault（）。 （即直接调用也可以）
05-02
包装防止默认 包装事件处理程序，以便在可用时为您提供e.preventDefault（）。 （即直接调用也可以） var prevDflt = require ( "wrap-prevent-default" ) ; var handler = prevDflt ( function ( event ) { console . log ( "I've been clicked!" ) ; } ) ; //attach it to the onclick handler somehow... (library and framework agnostic) // i.e. <a>... //when it's clicked it will preventDefault() //you can also call it directly a
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
12-10
取消浏览器对事件的默认行为（响应）（比如<a>标签的跳转等）并停止事件的继续传播。 实现代码 代码如下: function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault(); evt.stopPropagation(); } else { evt.returnValue = false; evt.cancelBubble = true; } } 只阻止事件继续传播（不取消默认行为） 代码如下: function stopEvent (evt) {
return false;和e.preventDefault();的区别
09-05
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple
flex中event.preventDefault()方法取消事件的默认行为
10-27
当点击datagrid的第一和第四项时，itemEdit事件将不起作用，许多事件都有默认执行的关联行为，接下来为大家详细介绍下，感兴趣的朋友可以参考下哈
网页右键ie不支持event.preventDefault和event.returnValue （需要加window）
09-05
网页右键ie不支持event.preventDefault和event.returnValue （需要加window） ，需要的朋友可以参考一下
event.preventDefault()作用
wujian_csdn_csdn的博客
09-29 3526
jQuery 事件 - preventDefault() 方法 防止链接打开 URL： $(“a”).click(function(event){ event.preventDefault(); }); 定义和用法： preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。 语法 event.preventDefault() 参数 描述 event 必需。规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数。 ...
event.preventDefault()方法
小景的博客
08-12 8414
今天看到这个方法，因为之前没有接触过，就随手记录一下，希望以后可以用到。 event.preventDefault()方法是用于取消事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。 其实就是用来取消时间的默认动作。 注意 1、如果 Event 对象的 c
event.preventDefault() 与返回 false
kalman2019的博客
12-21 1664
当我想在某个事件被触发后阻止其他事件处理程序执行时，我可以使用两种技术之一。我将在示例中使用 jQuery，但这也适用于纯 JS：1. event.preventDefault()2.返回假这两种停止事件传播的方法之间有什么显着区别吗？对我来说，return false; 比执行方法更简单、更短并且可能更不容易出错。使用该方法，您必须记住正确的大小写、括号等。另外，我必须在回调中定义第一个参数才能调用该方法。也许，有一些原因我应该避免这样做并使用 preventDefault 代替？有什么更好的
关于event.preventDefault()的用法
fuyangsuccessful的博客
01-10 6257
event.preventDefault() ；ES6中的对象解构赋值。
event.preventDefault()
Democreen
03-11 5928
<br />preventDefault() 方法定义和用法<br />取消事件的默认动作。<br /> 语法event.preventDefault()说明<br />该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。<br />例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，<br />通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，<br />那么就没有默认动作，或者不
EasyUi之Tabs(选项卡)以及关闭选项卡
u012949335的专栏
04-16 837
添加EasyUi的Tabs选项卡，实现各个菜单互选比照。
EasyUI效果--右击菜单
铃铛
02-10 7330
之前写了一篇博客，关于EasyUI效果的，当时我是将EasyUI的demo一个一个打开,在浏览器中查看他们的效果,因为是英文版的,很多单词不认识,还一个个查了意思.后来,我发现了EasyUI的中文官网的EasyUIDemo 在线实例,顿时觉得,当初自己好浪费时间.不过好在,一,认识了不少单词;二,对于EasyUI的样式了解了不少.现在,做项目总是会想着将这些效果融进去.     现在,我打算
easyui入门第三章
qq_43081232的博客
02-10 96
easyui入门记录（三）menumenu组件 menu组件 创建一个菜单 <script type="text/javascript"> $(function(){ //右键点击事件 $(document).bind("contextmenu",function(e){ //组织默认的菜单(阻止事件冒泡) e.preventDefault(); //弹出菜...
EasyUi之Tabs(选项卡)
qianbihua00的博客
04-02 4424
什么是Tabs 选项卡是最流行的导航模式之一(与菜单栏和垂直导航一样)。 选项卡最大的优点是用户很熟悉，而且经常是持久的内容，所以即使用户在网站或应用程序中跳出刚浏览过的内容，他们也不会迷失。 官方示例 成品示例 Tabs的使用案例 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给 标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子 标签进行创建，用法和panel(面板)相同。 2. 通过Javascript
Js中event.preventDefault()方法
最新发布
shanxiaxuesheng的博客
10-30 314
当时我想，于是搜了一下各种资料，发现event.preventDefault()是用来阻止元素发生默认的行为的一种方法，比如阻止默认表单提交，阻止跳转到默认的url。以上就是有关event.preventDefault()方法的总结啦，希望能给你带来一点帮助。这个方法是我在使用原生js编写“表单提交”部分的代码时，发现并学习到的方法。参数事必需的，且参数来自事件绑定函数。而我想要的就是后者的效果。该方法不支持IE浏览器，
React学习-event.preventDefault()方法的简单介绍
Biu_Destiny的博客
07-12 2508
React学习-event.preventDefault()方法的简单介绍 react官方文档中有这么一段: 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault。例如，传统的 HTML 中阻止表单的默认提交行为，你可以这样写： <form onsubmit="console.log('You clicked submit.'); return false"> <button type="submit"&gt
event.stopPropagation()和event.preventDefault()之间的联系
qq_51066068的博客
07-09 470
这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，event.stopPropagation()和event.preventDefault()，还有 return false。这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别...
weixin_33774615的博客
11-11 1790
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，...
event.preventDefault();
06-11
`event.preventDefault()` 是一个事件对象的方法，它用于阻止事件的默认行为。在 Web 应用程序中，很多事件都有默认的行为，例如点击链接会跳转到链接的地址，提交表单会刷新页面等等。如果不想要事件的默认行为，可以使用 `event.preventDefault()` 来取消它。 在上下文中，`event.preventDefault()` 用于阻止表单的默认提交行为。当用户点击注册按钮时，表单默认会提交并刷新页面，而我们希望在不刷新页面的情况下提交表单数据，因此需要使用 `event.preventDefault()` 来取消表单默认的提交行为。 在回调函数中调用 `event.preventDefault()` 后，可以执行其他的逻辑，例如获取表单数据并通过 AJAX 发送请求。需要注意的是，调用 `event.preventDefault()` 应该放在函数的开头，以确保能够及时地取消事件的默认行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值