前端js阻止事件冒泡

前端基础 专栏收录该内容
1 篇文章 0 订阅

title: 前端js阻止事件冒泡

date: 2018-4-21 20:27:24

tags: [js]

categories: js

keywords: 前端js阻止事件冒泡


记录在项目中遇到的问题

       
1.event.stopPropagation()方法

这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,

2.event.preventDefault()方法

这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;

html


<ul class="mui-table-view">
	<li class="mui-table-view-cell mui-media" onclick="ligo(this,1)" style="color: blue;">
					<span>飞速洗车</span>
					<button type="button" class="mui-btn mui-btn-primary"style="float: right;" onclick="btngo(this,5)">
						立即预约
					</button>
				</li>
				<li class="mui-table-view-cell mui-media" onclick="ligo(this,1)" style="color: blue;">
					<span>换机油</span>
					<button type="button" class="mui-btn mui-btn-primary"style="float: right;" onclick="btngo(this,5)">
						立即预约
					</button>
				</li>
				<li class="mui-table-view-cell mui-media" onclick="ligo(this,1)" style="color: blue;">
					<span>来了来了</span>
					<button type="button" class="mui-btn mui-btn-primary"style="float: right;" onclick="btngo(this,5)">
						立即预约
					</button>
				</li>			
				
				
</ul>



js


<script>
	
		function ligo(a,sum)
		{
			//   跳转服务详情界面
			alert(a.tagName+"\t"+sum);
		}
		function btngo(a,sum)
		{
			//  跳转预约界面
			event.stopPropagation();//  阻止冒泡
			alert(a.tagName+"\t"+sum);
		}
		
		
	</script>

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值