- 综合排序
- 最热优先
- 最新优先
- 来自专栏johnhuster
Event preventDefault()与stopPropagation()区别
stopPropagation该方法将停止事件的传播，阻止它被分派到其他 Document 节点，即到该document节点为止，注意该方法不能改变要在该节点上发生的事情，比如在input元素上执行ctrl
49340编辑于 2022-03-28 - 来自专栏全栈程序员必看
javascript中间preventDefault与stopPropagation角色介绍
preventDefault方法解讲到这里，stopPropagation方法呢？ 讲stopPropagation方法之前必需先给大家解说一下js的事件代理。 stopPropagation方法又起什么作用？ stopPropagation是能够阻止它的默认行为的发生而发生其它的事情。起到阻止js事件冒泡的作用。 看一段代码。 <! DOCTYPE html> <html> <head> <title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title> <meta name="keywords" content="JS,事件冒泡,cancelBubble,<em>stopPropagation</em>" /> <script> // ie下阻止冒泡 } else { //e.preventDefault(); e.stopPropagation
52620编辑于 2022-07-06 - 来自专栏赵康的日常专栏
【前端】stopPropagation, preventDefault, return false的区别
e.stopPropagation()阻止事件冒泡或者捕获 因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPropagation return false等效于同时调用e.preventDefault()和e.stopPropagation() if (ret===false){ event.preventDefault(); event.stopPropagation(); } ---- 详情可以看：stopPropagation, preventDefault 和 return false 的区别
39220编辑于 2023-10-17 - 阻止事件冒泡 事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation click(function(event){ alert('son'); // 阻止冒泡 event.stopPropagation 合并阻止操作 实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用 // event.stopPropagation(); // event.preventDefault(); // 合并写法来自专栏Devops专栏
jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()
事件冒泡 ，阻止事件冒泡 e.stopPropagation()
$("div ul").click(function (e) { //这个e其实就是event 是一个事件的对象 alert("我是ul"); e.stopPropagation "div").click(function (e) { alert("我是div"); }) //e.stopPropagation 在这里添加了e.stopPropagation();之后，“我是div”就不会弹出来了。因为已经被阻止了。 在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。 3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。
jquery中使用event.stopPropagation()阻止事件冒泡
span>按我
jQuery中return false,e.preventDefault(),e.stopPropagation()的区别
e.stopPropagation()阻止事件冒泡 <head> <title></title> <script src="Scripts/jQuery-1.4.1.js" type=" alert"); }); $("span").click(function (e){ alert("span alert"); e.stopPropagation }); </script> 测试 return false等效于同时调用e.preventDefault()和e.stopPropagation 如果手上有一份jquery源代码的话，可查看其中有如下代码： if (ret===false){ event.preventDefault(); event.stopPropagation
60行代码实现React的事件系统
兼容所有浏览器，同时拥有和浏览器原生事件相同的API，如stopPropagation()和preventDefault()。 _stopPropagation = true; if (this.nativeEvent.stopPropagation) { this.nativeEvent.stopPropagation 同时，实现了stopPropagation方法。 _stopPropagation) { // 如果执行了se.stopPropagation()，取消接下来的遍历 break; } } }; 注意，我们在SyntheticEvent 中实现的stopPropagation方法，调用后会阻止遍历的继续。
如何用JS屏蔽html网页中的鼠标点击行为？
屏蔽整个页面的鼠标点击通过监听document的click事件，并在事件处理函数中调用event.preventDefault()和event.stopPropagation()来阻止事件的默认行为和冒泡 document.addEventListener('click', function(event) { event.stopPropagation(); // 阻止事件冒泡 // 注意：对于点击事件 屏蔽特定元素的鼠标点击如果只想屏蔽页面上特定元素的点击事件，可以直接给这些元素添加事件监听器，并调用event.preventDefault()和event.stopPropagation()。 ').addEventListener('click', function(event) { event.preventDefault(); // 阻止默认行为（如果有的话） event.stopPropagation
vue 拖拽hooks ts版
= events const dragEvents = { dragover: (e: DragEvent) => { e.preventDefault() e.stopPropagation hasAndRun(dragenter, e) }, dragleave: (e: DragEvent) => { e.preventDefault() e.stopPropagation hasAndRun(dragleave, e) }, dragstart: (e: DragEvent) => { e.preventDefault() e.stopPropagation hasAndRun(dragstart, e) }, dragend: (e: DragEvent) => { e.preventDefault() e.stopPropagation e) hasAndRun(paste, e) }, drop: (e: DragEvent) => { e.preventDefault() e.stopPropagation
JavaScript停止冒泡和阻止浏览器默认行为
window.event.cancelBubble = true : e.stopPropagation(); } js阻止默认行为 function myfn(e){ window.event? ()，IE则是使用e.cancelBubble = true stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。 stopPropagation就是阻止目标元素的事件冒泡到父级元素。 window.event.cancelBubble = true : e.stopPropagation(); 阻止默认行为 w3c的方法是e.preventDefault()，IE则是使用e.returnValue ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡
Vue3 事件冒泡踩坑实录：5种实用的阻止冒泡方案
在事件处理函数中使用 event.stopPropagation()<template>
javascript事件详解
(); } document.body.onclick = function(){ alert(2); } 如上代码，如果我不使用stopPropagation()阻止冒泡事件的话，那么在页面中会先弹出 1，然后弹出2，如果使用stopPropagation()方法的话，只会在页面上弹出1，就不会冒泡到body上面去； IE下停止冒泡的话，我们可以使用cancelBubble属性，我们只要将此属性设置为 但是IE是不支持捕获事件的，但是stopPropagation()即支持捕获事件又支持冒泡事件的。 event.preventDefault(); }else { event.returnValue = false; } }, stopPropagation : function(event) { if(event.stopPropagation) { event.stopPropagation();
JavaScript阻止冒泡和取消默认事件(默认行为)
JavaScript冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。 防止冒泡和捕获 w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true stopPropagation也是事件对象(Event)的一个方法，用是阻止目标元素的冒泡事件 stopPropagation就是阻止目标元素的事件冒泡到父级元素。 window.event.cancelBubble = true : e.stopPropagation(); 取消默认事件 w3c的方法是e.preventDefault()，IE则是使用e.returnValue ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡
css与js写的原生modal 框，点击页面其他地方渐变消失
$(this).parent().parent().parent().find('.quick-shot-content').fadeIn(150); stopPropagation (e); }); function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } $(document
绑定点击事件，当点击事件里依赖异步返回结果则阻止冒泡失效
console.log("i",i) // 阻止冒泡 const ev = e || window.event; if (ev && ev.stopPropagation ) { //非IE浏览器 ev.stopPropagation(); } else { // 阻止冒泡 const ev = e || window.event; if (ev && ev.stopPropagation ) { //非IE浏览器 ev.stopPropagation(); } else {
【Web前端】嵌套元素的“事件”冒泡？！
如果我们想要控制这一流程，可以使用 stopPropagation() 方法。 使用 stopPropagation() 修复问题 stopPropagation() 方法可以用来阻止事件向上传播。 如果在子元素的事件处理函数中调用了 event.stopPropagation()，事件不会冒泡到父元素。 因为我们在按钮的事件处理函数中调用了 event.stopPropagation()，这使得事件不会继续向上冒泡。 事件捕获 事件捕获是事件处理的另一种机制，与事件冒泡相反。 通过调用 stopPropagation() 你可以精确地控制事件流。 事件委托允许你高效地管理多个元素，优化事件处理性能。 如有表述欠缺之处还请各位佬指正。
140. 精读《结合 React 使用原生 Drag Drop API》
react"; const DragAndDrop = props => { const handleDragEnter = e => { e.preventDefault(); e.stopPropagation (); }; const handleDragLeave = e => { e.preventDefault(); e.stopPropagation(); }; const handleDragOver = e => { e.preventDefault(); e.stopPropagation(); }; const handleDrop = e => { e.preventDefault(); e.stopPropagation(); }; return (
JavaScript 鼠标拖拽div 改变其大小
, moveHandler); } //处理了这个事件，不让任何其它元素看到它 if (event.stopPropagation ) event.stopPropagation(); //标准模型 else event.cancelBubble = true; // + "px"; } _startX = startX; _startY = startY; if (e.stopPropagation ) e.stopPropagation(); //标准模型 else e.cancelBubble = true; } function upHandler ) e.stopPropagation(); //标准模型 else e.cancelBubble = true; } //以一个对象的x和y属性的方式返回滚动条的偏移量
JavaScript捕获和冒泡探讨
总结就是：先捕获，后冒泡，捕获从上到下，冒泡从下到上（形象点说法：捕获像石头沉入海底，冒泡则像气泡冒出水面） 问：假如去掉注释 event.stopPropagation(); 结果又会输出什么？ 答：去掉event.stopPropagation() 之后，由于事件有捕获和冒泡时先执行捕获，捕获到div之后，事件被阻止，后面就不在继续传播了。所以只输出divcallback. 如果Event.stopPropagation()在事件派发前被调用，那么所有的阶段都会被跳过。 捕获 阶段：在事件对象到达事件目标之前，事件对象必须从window经过目标的祖先节点传播到事件目标。 if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } }, stopPropagation : function(e) { if (e.stopPropagation) { e.stopPropagation() } else { e.cancelBubble
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号