关于div内有子元素时,其鼠标移出事件的触发时机问题急!_html/css_WEB-ITnose
外面是一个层,里面有子元素,ul li
想捕捉层(div)的鼠标移出事件,没想到当鼠标移到层内的子元素上时竟然也触发了!!
请问:
1:这个情况是正常的吗?
2:我不想这样(即不触发移出事件),该怎么做?
谢谢!!
<div style="left:300px;width:150px;border:solid 1px red;" onmouseout="alert('出了层');"> <ul style="border:solid 1px blue;"> <li style="border:solid 1px yellow;">这是ul li1</li> <li style="border:solid 1px yellow;">这是ul li2</li> </ul><div>
回复讨论(解决方案)
不知说清楚没有?
再简述一下:
要求是,只要鼠标不移出层的范围外(包括移到层内的子元素上),都不触发层的mouseout事件!
现在情况是,移到层内的子元素上也触发了鼠标移出事件!!
解决方案 http://xuganggogo.javaeye.com/blog/538476
谢谢(提供思路),问题解决了,接分!
采用了另一种方案:
<script type="text/javascript"> function mOut(e) { e = e || window.event; o = e.relatedTarget||e.toElement; while(o.parentNode&&o.id!='div1'){ o=o.parentNode; } if(o.id!='div1') { alert("移出了层"); } } $(document).ready(function(){ }); </script>
<div id="div1" style="left:300px;width:150px;height:200px;border:solid 1px red; background-color:Gray;" onmouseout="mOut(event);"> <div style="background-color:Yellow;width:100px;height:100px;"><div style="background-color:Red;width:50px;height:50px;"></div></div></div>
谢谢楼主分享,么么~

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
