JS阻止DOM事件冒泡

最新推荐文章于 2023-05-04 20:58:57 发布
最新推荐文章于 2023-05-04 20:58:57 发布
阅读量680 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuaicike/article/details/22759197
版权
function stop1(e)
{

e.stopPropagation();//这句就是关键

}

onMouseDown="stop1(event);" 


特别要注意e.preventDefault()与e.stopPropagation()的区别，前者是中断整个动作，后者是完成了当前节点的动作以后阻止冒泡而已！！

温馨提示：DOM的冒泡是从里到外的~

shuaicike2013
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js阻止冒泡事件
12-06
js阻止冒泡事件的方法有2种。 事件冒泡：当一个元素上的事件被触发时，同样的事件会在那个元素的所有祖先元素中被触发。 这个事件是从原始元素开始一直冒泡到DOM树最上层。 目标元素：任何一个事件的目标元素最开始的那个元素，并且它在我们的元素对象中以属性的形式出现。使用事件代理可以把事件处理器添加到一个元素上，等待一个事件从它的自己元素冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。 方法： 直接在事件调用的函数末尾添加return false; 2.event.stopPropagation()写在事件函数的开始。
Javascript 阻止javascript事件冒泡，获取控件ID值
10-29
事件冒泡和获取控件ID值是JavaScript事件处理中的两个重要概念，对于理解JavaScript事件模型以及创建交互式网页至关重要。以下是关于这两个概念的详细说明： 1. **事件冒泡** 事件冒泡是指事件开始时由最具体的元素...
Dom阻止事件冒泡
aaron9185的博客
12-26 920
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .div1{ width: 30
阻止冒泡事件demo
weixin_30696427的博客
04-13 61
<!doctype html> <html> <head> <style> .box{width:200px;height:200px;background-color:green;} span{display:block;width:100px;height:30px;background-color:skyblue;} </...
Dom事件，阻止事件冒泡
Eliauk的博客
09-24 635
格式 元素名.事件名称=function(){ 执行的操作 } 其中function()里有一个参数e，打印e会看到事件里的各种属性 ## 鼠标常用事件 名称 含义 onclick() 单击鼠标 ondblclick() 双击鼠标 oncontextmenu() 右击鼠标 onmousedown() 鼠标按下 onmouseup() 鼠标抬起 onmouseenter() 鼠标移入 onmouseleave() 鼠标移出 onmousemove() 鼠
JS的DOM操作——阻止事件冒泡和阻止默认事件
m0_59345890的博客
07-21 1222
在学习阻止事件冒泡时，我们思考一个问题addEventListener的第三个参数为true是阻止事件传递还是false?都不会阻止事件传递,因为true捕获阶段触发false冒泡阶段触发；要阻止事件传递唯一的方式就是阻止事件冒泡事件对象调用stopPropagation()运行结果点击box3,可以看到只有box3触发了，因为box1,box2是在冒泡阶段触发，然而在box3事件对象中调用了stopPropagation()，阻止了事件冒泡，所以box1,box2的事件不再触发。...
js事件冒泡及其阻止方法
01-08
JavaScript中的事件冒泡是事件处理的一个重要机制，它是指事件从最深的DOM节点开始，然后逐级向上层节点传播事件的过程。例如，在一个父容器内有子元素的情况下，如果子元素和父元素都绑定了点击事件处理函数，当你...
Js冒泡事件详解及阻止示例
10-26
总的来说，JavaScript的事件冒泡机制是DOM事件处理的基础，理解并掌握如何阻止事件冒泡对于编写复杂的交互式Web应用非常关键。通过原生JavaScript或使用像jQuery这样的库，我们可以精确控制事件的传播和处理，从而...
React中阻止事件冒泡的问题详析
01-19
最近在研究react、redux等，网上找了很久都没有完整的答案，索性自己整理下，这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容，下面话不多说了，来一起看看详细的介绍吧 在正式开始前，先来看看 JS 中事件...
JavaScript阻止事件冒泡示例分享
12-01
阻止事件冒泡的主要目的是确保事件只在触发它的元素上执行处理程序，而不是沿着DOM树向上传递。在不同的浏览器环境下，阻止事件冒泡的方法有所不同。以下是一个兼容Firefox和Internet Explorer的示例： ```...
DOM事件流+阻止事件冒泡
最新发布
不畏的博客
05-04 461
记录一下。
JavaScript之阻止事件冒泡
m0_48375854的博客
12-01 861
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。         我们需要注意的是：事件冒泡本身的特性，会带来的坏处，也会带来的好处，在后续的博客我会详细说明。         所以我们在这里将论述一下如何阻止事件冒泡。         .
DOM事件的三个阶段及阻止事件冒泡
weixin_42442123的博客
11-06 1071
事件的三个阶段 捕获阶段 当前目标阶段 冒泡阶段 JS中注册事件的三种方式： onclick只有事件冒泡， attachEvent只有两个参数， 只有事件冒泡， addEventListener三个参数，最后一个参数默认false为事件冒泡，true为事件捕获。所以demo用的addEventListener这个方式 事件冒泡 html部分 &amp;lt;div id=&quot;box1&quot; style=...
Dom的事件模型、事件冒泡、阻止冒泡和事件委托
weixin_46412436的博客
07-09 222
什么是事件模型 Dom标准的事件模型：当事件发生时，其实会经历三个阶段！ 由外向内的捕获阶段：从Dom树根节点开始，到当前点击的元素位置，遍历并记录当前元素各级父元素上绑定的事件处理函数，这个阶段只是记录并不触发。 目标触发阶段：优先触发当前点击元素的处理函数。 冒泡执行阶段：按捕获阶段记录的各个父元素上的事件处理函数顺序，由内到外的反向的触发各级父元素上的事件。 如图所示 看个例子 <!DOCTYPE html> <html lang="en"> <head>
JS阻止事件冒泡的3种方法之间的不同
TH_NUM的博客
04-27 2152
什么是JS事件冒泡？： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 如何来阻止Jquery事...
JavaScript——DOM节点控制
Corn___的博客
10-24 379
JavaScript——DOM节点控制
DOM系列之阻止冒泡和取消默认行为
老__L的博客
03-06 1541
阻止冒泡和取消默认行为
JS DOM操作 函数 事件 阻止事件冒泡
weixin_30457881的博客
04-04 252
一 函数 1、字符串函数 s.tolowerCase( )； -- 变小写 s.toupperCase( )； -- 变大写 s.substr( 2, 8)； -- 截取 从索引2开始截取，截取8个字符长度 s.split( )； -- 指定字符分割，返回一个数组。 括号里放一个字符，按照这个字符分割s ...
归纳DOM事件中各种阻止方法
weixin_34306676的博客
02-22 306
前言 在复习事件这块的时候，发现了一个问题，网上很多文章对事件阻止这块解析的并不全面，并且有些文章也有错误之处，于是想自己总结一下，也方便自己的复习。 知识预热 事件冒泡和捕获 在看本篇文章之前，需要了解事件的冒泡和捕获，这里简单介绍下事件冒泡： 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收，然后逐级向上传播到较为不具体的...
JavaScript 阻止DOM对象的所有事件
____
06-01 2922
event.stopImmediatePropagation(); 使用此方法可阻止该DOM对象的所有事件执行！案例 onclick="return setIds(event)" function setIds(event){ if (!confirm('xxxxx')){ event.stopImmediatePropagetion(); return false;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值