简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript – Frage zu MouseEnter
滿天的星座
滿天的星座 2017-07-05 10:59:01
0
2
923
<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>

Wenn ich das untergeordnete Element mit der absoluten Positionierung verschiebe, wird das Ereignis auch beim Durchlaufen des untergeordneten Elements ausgelöst. Was ist los?

滿天的星座
滿天的星座

Antworte allen(2)
刘奇
刘奇2017-07-05 11:01:01 2 Etage

absolute positioning 只是将元素抽离了 normal flow ，并没有改变 document tree 的结构，所以子元素依然算是在父元素里面。

解决方法可以是判断 event.target 是不是子元素，或者改为给两者绑定 mouseover 然后在子元素里 stopPropagation 。

Wie +0
Antwort hinzufügen
滿天的星座
滿天的星座2017-07-05 11:01:01 1 Etage

根据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.

翻译一下就是：

当指针一类的东西移到某个元素的边界上，或者它的某个后代元素的边界上，就必须触发mouseenter事件。而当指针从某个元素里，移到它的某个后代元素的边界上时，则不可触发mouseenter事件。

所以对于你的问题，回答就是，移到后代上也会触发mouseenter是人家规定了的

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！