jq冒泡事件解决方案的区别

来源：互联网发布：淘宝能在国外编辑：程序博客网时间：2024/04/29 21:49

方法一：注：event.stopPropagation(); 记得参数加上event

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
    border: green 40px solid;
    width: 300px;
    height: 300px;
    margin: auto;
}

.box2 {
    border: yellow 40px solid;
    width: 220px;
    height: 220px;
    margin: auto;
}

span {
    position: relative;
    left: 50px;
    top: 50px;
    background-color:red;
}
</style>
<script src="jquery-1.10.1.min.js"></script>
   <script>
       $(function(){
               $('#span').on('click',function(event){
                   alert('span');
                   event.stopPropagation();
               })
               $('#box2').on('click',function(event){
                   alert('box2');
                   event.stopPropagation();
               })
                   $('#box1').on('click',function(event){
                   alert('box1');
                   event.stopPropagation();
               })
       })
</script>
</head>
<body>
   <div id="box1" class="box1">
        <div id="box2" class="box2">
            <span id="span">This is a span.</span>
        </div>
    </div>
</body>
</html>

方法二：利用return false;

但是这两种也是有区别的

return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

0 0