Home  >  Q&A  >  body text

javascript - Question about 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>

When I use absolute positioning to move the child element below, the event will also be triggered when passing through the child element. What's going on?

滿天的星座滿天的星座2641 days ago899

reply all(2)I'll reply

  • 怪我咯

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

    Absolute positioning only removes elements from the normal flow and does not change the structure of the document tree, so the child elements are still considered to be inside the parent element.

    The solution can be to determine whether event.target is a child element, or to bind mouseover to both and then stopPropagation in the child element.

    reply
    0
  • 滿天的星座

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

    Based on 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 mouseover, but differs in that it does not bubble, and MUST NOT be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.

    The translation is:

    When something like a pointer moves to the boundary of an element, or the boundary of one of its descendant elements, the mouseenter event must be triggered. When the pointer moves from an element to the boundary of one of its descendant elements, the mouseenter event cannot be triggered.

    So the answer to your question is that it is stipulated by others that moving to descendants will also trigger mouseenter

    reply
    0
  • Cancelreply