onmouseout절대 포지티브 div에서 함수에 문제가 있습니다. 마우스가 div의 자식 요소에 부딪 치면 mouseout 이벤트가 발생하지만 마우스가 부모 인 절대 div에서 벗어날 때까지 마우스를 발사하지는 않습니다.
mouseoutjquery없이 자식 요소에 도달했을 때 이벤트가 발생 하지 않도록하려면 어떻게해야합니까 ?
나는 이것이 이벤트 버블 링과 관련이 있다는 것을 알고 있지만, 이것을 해결하는 방법을 찾는 데 운이 없다.
비슷한 게시물을 발견했습니다 : 자식 요소에 의해 트리거 된 mouseout 이벤트를 비활성화하는 방법은 무엇입니까?
그러나 그 솔루션은 jQuery를 사용합니다.
답변
function onMouseOut(event) {
//this is the original element the event handler was assigned to
var e = event.toElement || event.relatedTarget;
if (e.parentNode == this || e == this) {
return;
}
alert('MouseOut');
// handle mouse event here!
}
document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);CSS와 HTML이 필요한 빠른 JsFiddle 데모를 만들었습니다.
크로스 브라우저 지원을위한 수정 된 링크 수정 http://jsfiddle.net/RH3tA/9/
부모 div에 자식이 중첩되어 있으면 바로 부모 만 확인한다는 점에 유의 하십시오. “일반 요소”를 찾고있는 부모 요소를 통과해야합니다.
중첩 된 자식에 대한 편집 예
편집 크로스 브라우저를 위해 수정되었습니다.
function makeMouseOutFn(elem){
var list = traverseChildren(elem);
return function onMouseOut(event) {
var e = event.toElement || event.relatedTarget;
if (!!~list.indexOf(e)) {
return;
}
alert('MouseOut');
// handle mouse event here!
};
}
//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);
//quick and dirty DFS children traversal,
function traverseChildren(elem){
var children = [];
var q = [];
q.push(elem);
while (q.length > 0) {
var elem = q.pop();
children.push(elem);
pushAll(elem.children);
}
function pushAll(elemArray){
for(var i=0; i < elemArray.length; i++) {
q.push(elemArray[i]);
}
}
return children;
}그리고 새로운 JSFiddle , EDIT 업데이트 링크
답변
사용하십시오 onmouseleave.
또는 jQuery에서 mouseleave()
당신이 찾고있는 정확한 것입니다. 예:
<div class="outer" onmouseleave="yourFunction()">
<div class="inner">
</div>
</div>또는 jQuery에서 :
$(".outer").mouseleave(function(){
//your code here
});예가 여기 있습니다 .
답변
경우에 따라 작동 하는 더 간단한 순수 CSS 솔루션 ( IE11 이상 )의 경우 어린이 pointer-events를 다음과 같이 설정하여 제거 할 수 있습니다.none
.parent * {
pointer-events: none;
}답변
아래에 나온 것을 기반으로 한보 다 우아한 솔루션이 있습니다. 그것은 여러 레벨의 어린이들로부터 발생하는 사건을 설명합니다. 또한 브라우저 간 문제도 설명합니다.
function onMouseOut(this, event) {
//this is the original element the event handler was assigned to
var e = event.toElement || event.relatedTarget;
//check for all children levels (checking from bottom up)
while(e && e.parentNode && e.parentNode != window) {
if (e.parentNode == this|| e == this) {
if(e.preventDefault) e.preventDefault();
return false;
}
e = e.parentNode;
}
//Do something u need here
}
document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);답변
저에게 영감을 준 Amjad Masad에게 감사드립니다.
IE9, FF 및 Chrome에서 작동하는 것으로 보이는 다음 솔루션을 가지고 있으며 코드가 매우 짧습니다 (복잡한 폐쇄 및 가로 방향의 자식 제외).
DIV.onmouseout=function(e){
// check and loop relatedTarget.parentNode
// ignore event triggered mouse overing any child element or leaving itself
var obj=e.relatedTarget;
while(obj!=null){
if(obj==this){
return;
}
obj=obj.parentNode;
}
// now perform the actual action you want to do only when mouse is leaving the DIV
}답변
onmouseout 대신 onmouseleave를 사용하십시오.
특정 코드를 보여주지 않았으므로 특정 예제에서 코드를 표시하는 방법을 보여줄 수 없습니다.
그러나 매우 간단합니다. onmouseout을 onmouseleave로 바꾸십시오.
그게 다야 🙂 그래서 간단합니다 🙂
방법이 확실하지 않은 경우 다음에 대한 설명을 참조하십시오.
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out
케이크의 평화 🙂 그것을 즐기십시오 🙂
답변
jQuery를 사용하는 경우 “mouseleave”기능을 사용할 수도 있습니다.이 기능은이 모든 것을 처리합니다.
$('#thetargetdiv').mouseenter(do_something);
$('#thetargetdiv').mouseleave(do_something_else);do_something은 마우스가 targetdiv 나 그 자식 중 하나에 들어갈 때 발생하고 do_something_else는 마우스가 targetdiv와 그 자식 중 하나를 떠날 때만 발생합니다.
