使用 event.stopPropagation() 阻止事件传播

最新推荐文章于 2024-05-15 22:50:31 发布
VIP文章 最新推荐文章于 2024-05-15 22:50:31 发布
阅读量644 收藏 1
点赞数
分类专栏： JavaScript 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VoisSurTonChemin/article/details/121779725
版权

目录

背景

我最近参与的项目涉及开发一个公司内部使用的组件库，我在开发一个搜索框组件时遇到了一个麻烦的问题。简单来说是：

请添加图片描述

  • 点击外层容器会聚焦在输入框上。这是别人写的底层组件上的逻辑，不方便改；
  • 我希望点击容器中的 icon 时（是个返回箭头），输入框会失焦。

写好 event handler 之后试了一下发现，每次点击容器内部的 icon，都无法实现失焦的效果。显然，内部 icon 的 handler 触发失焦之后，event 又继续传播到了外层容器，并触发相应 handler，结果

最低0.47元/天 解锁文章
倪琛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于event.cancelBubble和event.stopPropagation()的区别介绍
09-05
cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他浏览器的疑惑介绍。
JavaScript的事件传播机制
weixin_45821809的博客
03-12 1517
JavaScript的事件传播机制
关于js中事件的event.stopPropagation()方法的理解与举例说明
zhizhan888的博客
12-22 8850
这里有你想要的JavaScript事件的触发原理，stopPropagation()方法的使用，欢迎大家来讨论，一起相互学习，一起进步
阻止事件冒泡event.stopPropagation()
qq_38435906的博客
12-14 1700
/****************** 定义和用法 不再派发事件。 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 说明 该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Docum
阻止事件向下传递_Android TouchEvent事件传递机制
weixin_42513602的博客
01-30 1244
跟touch事件相关的3个方法： public boolean dispatchTouchEvent(MotionEvent ev); //用来分派event public boolean onInterceptTouchEvent(MotionEvent ev); //用来拦截event public boolean onTouchEvent(MotionEvent ev); //用来处理...
stopPropagation()方法阻止事件的向上传播
热门推荐
奔跑8蜗牛
11-10 2万+
一、定义        不再派发事件。        终止事件在传播过程的捕捉、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 二、语法        event.stopPropagation(); 三、js中       js中的事件默认是冒泡方式，逐层往上传播，可以通过stopPropagation()函数停止事件在D...
事件冒泡
weixin_43498251的博客
07-22 152
事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 引自 https://blog.cs...
event中的stopPropagation和preventDefault
07-26 1261
1、DOM事件模型；2、事件默认行为；3、stopPropagation；4、preventDefault；5、栗子分析
event.stopPropagation()和event.preventDefault()之间的联系
qq_51066068的博客
07-09 518
这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，event.stopPropagation()和event.preventDefault()，还有 return false。这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
event.stopPropagation()需要注意的一点
qupeng666的博客
07-28 4675
众所周知 event.stopPropagation() 是阻止事件冒泡和捕获； 需要注意的是：虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点. 补充一点： 你点击的元素目标(自身触发事件,是冒泡还是捕获无所谓)，所以点击的当前元素目标 从上往下执行，不分冒泡类型或者捕获类型。 例如：var outA = document.getE
Jquery阻止事件冒泡 event.stopPropagation
10-28
帮朋友写了一个小效果，单击标签后标签变色并添加一个叉的图片，点击叉标签恢复原样，具体效果请点击下面的result
JavaScript中使用stopPropagation函数停止事件传播例子
10-25
主要介绍了JavaScript中使用stopPropagation函数停止事件传播例子,即阻止事件冒泡的一个方法,需要的朋友可以参考下
event.stopPropagation()和event.preventDefault()
qq_36836277的博客
03-20 377
1.event.preventDefault() preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交） 2.event.stopPropagation() event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。尤其是点击事件。 <!DOCTYPE html> <html> &...
阻止事件冒泡(event.stopPropagation())/阻止默认事件(event.preventDefault())
HELLO WORLD
10-05 2805
event.stopPropagation() stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。 function stopEvent(e) { e.stopPropagation(); } el.addEventListener('click', stopEvent, false); 上...
JS中如何阻止事件的传播
webchang的博客
03-24 8180
使用stopPropagation和stopImmediatePropagation阻止事件的传播
event.stopPropagation()，阻止冒泡事件
qq_39822451的博客
09-24 542
{header:'${text("说明xxxx")}', name:'name1', editable:true, edittype:'textarea','onkeydown':'stopPropagation(event)' editoptions:{'maxlength':'255', 'class':'form-control', 'rows':'2'}}, function sto...
jQuery--事件对象event详解、阻止默认事件、阻止事件冒泡
吴声子夜歌的博客
10-02 1781
事件对象 由于标准DOM和IE-DOM所提供的事件对象的方法有所不同，导致使用JavaScript在不同的浏览器中获取事件对象比较繁琐。jQuery针对该问题进行了必要的封装与扩展，已解决浏览器兼容性问题，使得在任意浏览器中都可以轻松获取事件处理对象。 事件对象常见的属性列表： 属性 描述 pageX 鼠标指针相对于文档的左边缘的位置 pageY 鼠标指针相对于文档的上边缘的位...
Javascript中怎样阻止事件传播？
金木讲编程
05-17 1020
需要注意的是，event.stopPropagation()只能阻止事件在事件流中的传播，但无法阻止事件的默认行为。该方法可以在事件处理程序中调用，以阻止事件从当前元素向上级元素进行冒泡传播，或阻止事件从捕获阶段向下级元素进行捕获传播。上述示例中的事件处理程序阻止了事件的冒泡传播并取消了事件的默认行为。在上述示例中，当childElement元素被点击时，子元素的点击事件处理程序中的event.stopPropagation()会阻止事件继续向上级元素传播，因此父元素的点击事件处理程序不会执行。
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1169
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
js阻止事件捕获的方法
08-08
在JavaScript中，阻止事件捕获有以下几种方法： ...如果想要完全阻止事件的传播，可以同时使用event.stopPropagation和event.preventDefault方法。另外，使用上述方法时应当注意浏览器的兼容性问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值