jQuery中阻止hover事件冒泡

jQuery中阻止hover事件冒泡

前言

给子元素设置hover样式后，通过鼠标的移入、移出触发子元素的hover事件。此时如果子元素的父元素甚至祖辈元素同样存在hover事件，在执行完子元素的hover事件之后会层层向上触发父辈元素的hover事件。这就是hover事件的冒泡现象。

冒泡示例

<div class="wrap">
    <div class="box">
        <div class="child1 child">我是容器中的第一个子元素</div>
        <div class="child2 child">我是容器中的第二个子元素</div>
    </div>
 </div>
$default-width:200px;
$default-height:200px;
$redColor:red;
$border:1px solid black;
*{
    margin: 0;
    padding: 0;
}
.wrap{
    width: 100%;
    background-color: yellow;
    height: 600px;
    border: $border;
    &:hover{
       background-color: $redColor;
    }
    .box{
        width: 80%;
        margin: 0 auto;
        height: 400px;
        background-color: green;
        display: flex;
        border: $border;
        &:hover{
            background-color: $redColor;
         }
        .child1{
            width: $default-width;
            height: $default-height;
            background-color: lightblue;
            border: $border;
            &:hover{
                background-color: $redColor;
             }
        }
        .child2{
            width: $default-width;
            height: $default-height;
            border: $border;
            background-color: rgb(114, 40, 129);
            &:hover{
                background-color: $redColor;
             }
        }
    }
}

冒泡效果

页面加载默认效果

鼠标悬浮在第一个子元素上面，它的父级和祖先的hover事件同样被触发

阻止冒泡

1. solution1

    $("div").hover(function(event){
           var event=event || document.event;
           event.stopPropagation()
           $(this).addClass(" selected");    
       },function(event){
           var event=event || document.event;
           event.stopPropagation()
           $(this).removeClass(" selected")
       })

2. solution2

 	 $("div").hover(function(event){
             if(event.target== this)
            {
                $(this).addClass(" selected");
            }
        },function(event){
           if(event.target== this)
            {
                $(this).removeClass(" selected")
            }
        })

阻止冒泡效果

阻止冒泡之后，鼠标悬浮第一个子元素，只会触发子元素的hover事件。

总结

hover事件是由mouseenter和mouseleave共同构成的。