阻止冒泡事件
**方式一:event.stopPropagation();
$("#div1").mousedown(function(event){
event.stopPropagation();
});
方式二:return false;
$("#div1").mousedown(function(event){
return false;
});
但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。**
**这是方法一只有孩子的事件,阻止了父亲的事件**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul li{
list-style: none;
float: left;
width: 200px;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<Li>孩子1</Li>
<Li>孩子2</Li>
<Li>孩子3</Li>
<Li>孩子4</Li>
</ul>
</body>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript">
$('ul').on('click',function(){
alert('我是父親')
})
$('ul li').on('click',function(event){
alert('我是孩子')
event.stopPropagation();
})
</script>
</html>