event.stopPropagation(); -- 阻止元素冒泡事件
注:嵌套元素一般都存在冒泡事件,会带来某些影响
例:<div id="c1" οnclick="alert(1)">
<div id="c2" onlick="alert(2)">
<input type="button" id="c3" value="点击" οnclick="alert(3)">
</div>
</div>
这里点击button的时候,浏览器会先后弹出3,2,1,本来只想让绑定在button上的事件发生,却无意中触发了它的两个父级上的事件,这里我们只是做了一个简单测试,试想如果在项目开发中,某个按钮和他的父级同时绑定了很重要的事件,那么结果会惨不忍睹。这时的处理方法就是阻止冒泡事件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易拖放效果</title>
<style>
#DragContent{
width:500px;
height:500px;
background:#efefef;
position: relative;
}
#idDrag {
position: absolute;
top: 0;
left: 0;
border: 5px solid #0000ff;
background: #c4e3fd;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="DragContent">
<div id="idDrag"></div>
</div>
我想按住拖动元素放开了不触发DragContent的点击事件
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script>
$(document).ready(function(){
$('#DragContent').bind('click', function(){
console.log('dragcontent');
});
$('#idDrag').bind('click', function(){
console.log('iddrag');
return false;
});
});
</script>
</body>
</html>
只要在绑定的时候return false就行了js实现: document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);