JavaScript阻止冒泡事件

最新推荐文章于 2022-06-10 09:25:08 发布
最新推荐文章于 2022-06-10 09:25:08 发布
阅读量136 收藏
点赞数
文章标签： JavaScript DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44145150/article/details/103464336
版权 
<html>
<head>
<script type="text/JavaScript">
	sc={
		init:function(){
			if(!document.getElementById||!document.createTextNode)
				return ;
			sc.head=document.getElementsByTagName("li")[0];
			if(!sc.head)return ;
			sc.myAddListener("click",sc.hEvent,"h3");
			sc.myAddListener("click",sc.pEvent,"p");
			sc.myAddListener("click",sc.aEvent,"a");
		},
		myAddListener:function(event,func,ele){
			var temp=sc.head.getElementsByTagName(ele);
			for(var i=0;i<temp.length;++i){
				temp[i].addEventListener(event,func,false);
			}
		},
		hEvent:function(e){
			alert("h3 is being clicked");
			e.stopPropagation();
			e.preventDefault();
		}
		pEvent:function(e){
			alert("p is being clicked");
			e.stopPropagation();
			e.preventDefault();
		}
		aEvent:function(e){
			alert("a is being clicked");
			e.stopPropagation();
			e.preventDefault();
		}

	}

</script>
</head>

<body>
<ul>
	<li>
		<h3><a href="#">News Title</a></h3>
		<p>Content</p>
		<p><a href="#">More Detail</a></p>
	</li>
</ul>

</body>
</html>
JJ/\LL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
addEventListener(),封装取消冒泡的函数stopBubble(event)
weixin_44978975的博客
09-26 667
1冒泡事件是结构上的向外冒泡 捕获事件是结构上向里捕获 那么冒泡事件和捕获事件谁先执行啊 var wrapper =document.getElementsByClassName('wrapper')[0]; var content =document.getElementsByClassName('content')[0]; var box =document.getElementsByC...
常用事件 与事件监听addEventListener 阻止事件冒泡、默认行为
qq_45305088的博客
11-03 5461
获取鼠标位置 function（event）{ console.log(event.clientX);输出鼠标的X轴 console.log(event.ClientY);输出鼠标的y轴 } 获取键盘 document.onkeydowm=function(e){ console.log(e.keycode);输出键盘的字符代码 } 触屏事件 box.ontouchstart=function（）{}触碰 box.ontouchend=function（）{}触碰离开 box.ontouchmo
整理事件绑定 addEventLister()事件 取消默认行业，阻止冒泡 取消事件冒泡
weixin_46010797的博客
08-31 446
事件冒泡指当一个元素的事件被触发的时候，比如鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发，这个过程被称为事件冒泡。这个事件是从原始元素开始一直冒泡到DOM树的最上层。事件传播的3个阶段：捕获、冒泡、目标阶段。 阻止事件冒泡： w3c的方法是event.stopPropagation()，IE则是使用event.cancelBubble = true; 兼容性写法： 复制代码 1 var event = event || window.event; 2 if(event &&am
EVENT事件-------阻止冒泡+阻止默认
m0_51272779的博客
05-26 224
EVENT事件-------阻止冒泡+阻止默认
JavaScript-----阻止事件默认行为和事件冒泡
weixin_45904557的博客
06-10 2208
目录一.阻止事件默认行为1.preventDefault();方法2.低版本浏览器 returnValue属性3.return false;e.stopPropagation();e.cancelBubble = true; 阻止事件冒泡的兼容性解决方案阻止事件默认行为的三种方法: 以下是没有阻止冒泡行为的示例,会从最具体的元素向上床底: //stop 停止 Propagation传播//ie cancel取消 bubble泡泡 阻止冒泡排序之后:...
JS基础-18-addEventListener和冒泡
HZ~的博客
08-03 1184
绑定事件的两种方式/DOM事件的级别 方式一：onclick element.onclick = function () { } 举例： <body> <button>点我</button> <script> var btn = document.getElementsByTagName("button")[0]; //这种事件绑定的方法容易被层叠。 btn.onclick = function () {
JavaScript阻止事件冒泡示例分享
10-24
主要分享了一则JavaScript阻止事件冒泡示例,需要的朋友可以参考下
JavaScript捕捉事件和阻止冒泡事件实例分析
10-18
主要介绍了JavaScript捕捉事件和阻止冒泡事件,结合实例形式分析了冒泡的原理及javascript阻止冒泡的相关操作技巧,需要的朋友可以参考下
浅谈javascript事件取消和阻止冒泡
10-24
总结来说，JavaScript的事件取消和阻止冒泡是控制页面交互行为的关键工具。通过使用`event.preventDefault()`、`event.stopPropagation()`以及IE特有的方法，我们可以精细地管理事件的行为，确保它们按照我们的预期...
Javascript 阻止javascript事件冒泡，获取控件ID值
10-29
Javascript学习日记-阻止javascript事件冒泡，获取控件ID值
JavaScript中的事件流(事件捕获/冒泡)以及事件的兼容(事件的绑定addEventListener/移除removeEventListener,阻止冒泡/默认)
weixin_44870681的博客
05-27 435
一.事件流 1.事件流的介绍: 事件流描述的是从页面中接收事件的顺序. 事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件. 2.事件流包括两种模式：冒泡和捕获. (1)事件冒泡: 是值子元素和父元素具备同样的事件,当触发子元素的事件时,也会触发父元素的事件(由内至外)....
JS事件冒泡、停止冒泡、addEventListener--实例演示
weixin_34185364的博客
09-01 271
问题： <div class='item' id='outer' onclick="alert('outer')"> <div class='item' id='inner' onclick="alert('inner');"> <div class='item' id='core' onclick="alert('core')"> ...
讲讲JS中addEventListener和事件的冒泡与捕获
m0_46636414的博客
06-06 960
addEventListeneraddEventListener用途addEventListener几个参数事件的冒泡与捕获 addEventListener用途 在原生JS中，当我们对一个节点进行多次重复的事件绑定的时候，因为JS 的执行顺序，前面绑定的相同事件将会被覆盖 <div class="log">点击</div> <script> let log = document.querySelector('.log') log.onclick = func
JavaScript教程（十一）JavaScript中事件的兼容③(事件的绑定addEventListener/移除removeEventListener,阻止冒泡/默认)
qq_43434300的博客
12-13 786
一.事件兼容 1.事件绑定:addEventListener 用于注册事件处理程序(为文档节点).IE 中为 attachEvent,我们为 什么讲addEventListener而不讲attachEvent呢?一来attachEvent比较简单,二来addEventListener才是 DOM 中的标准内容. 语法: 第一个参数是事件的类型(如 “click” 或 “mousedown”). 第...
如何给元素添加事件监听和取消事件冒泡
luffot的博客
11-06 717
var div = document.getElementById("div"); /*如何通过DOM2模型给同一个元素添加多个同类型事件监听 * 在W3C类型的浏览器下，先声明的先触发 * 在IE类型的浏览器下，先声明的后触发*/ if (document.addEventListener){ div.addEventListener("click",function ()
js阻止默认行为和冒泡，添加和删除监听事件
XiaoLong4150的博客
07-19 1928
var allEvent = { //添加事件监听 addEvent: function(element, type, callback){ if(element.addEventListener()){ element.addEventListener(type, callback, false); } el
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
kino2046的博客
03-17 1199
addEventListener 事件监听器 target.addEventListener(type,listener[,options|useCapture])添加事件监听 参数： type事件类型(click、mouseover等，注意这里不加on) listener事件处理函数 可选参数： options配置对象...
基于STM32控制遥控车的蓝牙应用程序
06-27
基于STM32控制遥控车的蓝牙应用程序
Memcached 1.2.4 版本源码包
最新发布
06-27
粤嵌gec6818开发板项目Memcached是一款高效分布式内存缓存解决方案，专为加速动态应用程序和减轻数据库压力而设计。它诞生于Danga Interactive，旨在增强LiveJournal.com的性能。面对该网站每秒数千次的动态页面请求和超过七百万的用户群，Memcached成功实现了数据库负载的显著减少，优化了资源利用，并确保了更快的数据访问速度。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
javascript阻止事件冒泡
06-06
在JavaScript中，阻止事件冒泡的通用方法是使用event.stopPropagation()方法。当在一个DOM元素上触发某个事件时，浏览器会将此事件对象event作为函数的参数传递到事件监听器函数中。在事件监听器中，通过调用event....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值