前端js阻止事件冒泡

---

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>