搜尋

首頁  >  問答  >  主體

javascript - 關於mouseenter的問題

<head>
<style>
    .enter h2{
        border:1px solid;
        background: white;
        position: absolute;
        top: 200px;
    }
   .enter{
           border:1px solid;
           background: #eee;
           width: 500px;
           height: 100px;
   }
</style>
<script type="text/javascript" src="jquery/jquery-3.2.1.js"></script>
</head>
<body>
    <p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p>
    <p class="enter">
        <h2 >被触发的 Mouseenter 事件:<span></span></h2>
    </p>
<script type="text/javascript">
    x=0;
    y=0;
    $(document).ready(function(){
      $("p.enter").mouseenter(function(){
        $(".enter span").text(y+=1);
      });
    });
</script>
</body>

#當我用絕對定位把子元素移到下面,這時穿過子元素也會觸發事件,這是怎麼回事?

滿天的星座滿天的星座2690 天前931

全部回覆(2)我來回復

  • 怪我咯

    怪我咯2017-07-05 11:01:01

    absolute positioning 只是將元素抽離了 normal flow ,並沒有改變 document tree 的結構,所以子元素依然算是在父元素裡面。

    解決方法可以是判斷 event.target 是不是子元素,或者改為給兩者綁定 mouseover 然後在子元素裡 stopPropagation 。

    回覆
    0
  • 滿天的星座

    滿天的星座2017-07-05 11:01:01

    根據https://www.w3.org/TR/uievent...

    A user agent MUST dispatch this event when a pointing device is moved onto the boundaries of an element or one of its descendent elements. This event type is similar to monot over, but ders in that s​​nfkwuse not over, sbblen, 週, bblen , 週when the pointer device moves from an element onto the boundaries of one of its descendent elements.

    翻譯一下就是:

    當指標一類的東西移到某個元素的邊界上,或它的某個後代元素的邊界上,就必須觸發mouseenter事件。而當指標從某個元素裡,移到它的某個後代元素的邊界上時,則不可觸發mouseenter事件。

    所以對於你的問題,答案就是,移到後代上也會觸發mouseenter是人家規定了的

    回覆
    0
  • 取消回覆