ป้องกัน onmouseout เมื่อทำการโฮเวอร์องค์ประกอบลูกของ div div โดยไม่มี jQuery

ฉันกำลังมีปัญหากับonmouseoutฟังก์ชั่นใน divitoned แน่นอน เมื่อเมาส์กระทบกับองค์ประกอบลูกใน div เหตุการณ์ mouseout จะเกิดเพลิงไหม้ แต่ฉันไม่ต้องการให้มันยิงจนกว่าเมาส์จะออกจากตัวแม่ div ที่สมบูรณ์

ฉันจะป้องกันไม่ให้mouseoutเหตุการณ์เกิดขึ้นเมื่อมีการเข้าชมองค์ประกอบย่อยโดยไม่มี jQuery ได้อย่างไร

ฉันรู้ว่าสิ่งนี้เกี่ยวข้องกับเหตุการณ์เดือดปุด ๆ แต่ฉันไม่มีโชคในการหาวิธีการทำงานออก

ฉันพบโพสต์ที่คล้ายกันที่นี่: ฉันจะปิดการใช้งานเหตุการณ์ 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);

ฉันได้ทำการสาธิต JsFiddle อย่างรวดเร็วด้วย CSS และ HTML ที่จำเป็นทั้งหมดลองดู ...

ลิงค์แก้ไขแก้ไขสำหรับการสนับสนุนข้ามเบราว์เซอร์http://jsfiddle.net/RH3tA/9/

โปรดทราบว่าสิ่งนี้จะตรวจสอบเฉพาะผู้ปกครองในทันทีหากผู้ปกครองมีลูกซ้อนกันคุณจะต้องสำรวจผ่านองค์ประกอบที่ผู้ปกครองมองหา "องค์ประกอบดั้งเดิม"

ตัวอย่างการแก้ไขสำหรับเด็กที่ซ้อนกัน

แก้ไขแก้ไขสำหรับการข้ามเบราว์เซอร์ด้วยความหวัง

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 , แก้ไขการเชื่อมโยงการปรับปรุง

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 จะยิงเมื่อเมาส์เข้าสู่ thetargetdiv หรือลูก ๆ ของมัน do_something_else จะยิงเมื่อเมาส์ออกจาก thetargetdiv และลูก ๆ ของมัน

ฉันคิดว่าQuirksmodeมีคำตอบทั้งหมดที่คุณต้องการ (พฤติกรรมเบราว์เซอร์ที่แตกต่างกันและเหตุการณ์mouseenter / mouseleave ) แต่ฉันคิดว่าข้อสรุปที่พบบ่อยที่สุดสำหรับเหตุการณ์นั้นคือการใช้เฟรมเวิร์กเช่น JQuery หรือ Mootools (ซึ่งมีmouseenterและเหตุการณ์mouseleaveซึ่งเป็นสิ่งที่คุณต้องการจะเกิดขึ้น)

ดูว่าพวกเขาทำได้อย่างไรถ้าคุณต้องการทำด้วยตัวเอง
หรือคุณสามารถสร้าง Mootools รุ่น "lean Mean Mean" ที่กำหนดเองของคุณด้วยส่วนของเหตุการณ์ (และการพึ่งพา)

ลอง mouseleave()

ตัวอย่าง:

<div id="parent" mouseleave="function">
   <div id="child">

   </div>
</div>

;)

ฉันพบวิธีแก้ปัญหาที่ง่ายมาก

เพียงแค่ใช้เหตุการณ์ onmouseleave = "myfunc ()" กว่าเหตุการณ์ onmousout = "myfunc ()"

ในรหัสของฉันมันทำงาน !!

ตัวอย่าง:

<html>
<head>
<script type="text/javascript">
   function myFunc(){
      document.getElementById('hide_div').style.display = 'none';
   }
   function ShowFunc(){
      document.getElementById('hide_div').style.display = 'block';
   }
</script>
</head>
<body>
<div onmouseleave="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
   Hover mouse here
   <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
      CHILD <br/> It doesn't fires if you hover mouse over this child_div
   </div>
</div>
<div id="hide_div" >TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>

ตัวอย่างเดียวกันกับฟังก์ชั่น mouseout:

<html>
<head>
<script type="text/javascript">
   function myFunc(){
      document.getElementById('hide_div').style.display = 'none';
   }
   function ShowFunc(){
      document.getElementById('hide_div').style.display = 'block';
   }
</script>
</head>
<body>
<div onmouseout="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
   Hover mouse here
   <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
      CHILD <br/> It fires if you hover mouse over this child_div
   </div>
</div>
<div id="hide_div">TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>

หวังว่าจะช่วย :)

แม้ว่าโซลูชันที่คุณอ้างถึงจะใช้ jQuery, mouseenterและmouseleaveเป็นเหตุการณ์ dom ดั้งเดิมดังนั้นคุณอาจใช้โดยไม่มี jquery

มีสองวิธีในการจัดการกับสิ่งนี้

1) ตรวจสอบผลลัพธ์ event.target ในการติดต่อกลับของคุณเพื่อดูว่าตรงกับ div parent ของคุณหรือไม่

var g_ParentDiv;

function OnMouseOut(event) {
    if (event.target != g_ParentDiv) {
        return;
    }
    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.onmouseout = OnMouseOut;
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

2) หรือใช้การจับภาพเหตุการณ์และการเรียก event.stopPropagation ในฟังก์ชั่นการโทรกลับ

var g_ParentDiv;

function OnMouseOut(event) {

    event.stopPropagation(); // don't let the event recurse into children

    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.addEventListener("mouseout", OnMouseOut, true); // pass true to enable event capturing so parent gets event callback before children
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

ฉันทำให้มันทำงานได้อย่างมีเสน่ห์ด้วย:

function HideLayer(theEvent){
 var MyDiv=document.getElementById('MyDiv');
 if(MyDiv==(!theEvent?window.event:theEvent.target)){
  MyDiv.style.display='none';
 }
}

อ่าและMyDivแท็กก็เป็นแบบนี้:

<div id="MyDiv" onmouseout="JavaScript: HideLayer(event);">
 <!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>

วิธีนี้เมื่อ onmouseout ไปที่เด็ก grand-child ฯลฯ ... style.display='none'ไม่ได้ดำเนินการ; แต่เมื่อ onmouseout ออกจาก MyDiv มันจะทำงาน

ดังนั้นไม่จำเป็นต้องหยุดการแพร่กระจายใช้ตัวจับเวลา ฯลฯ ...

ขอบคุณสำหรับตัวอย่างฉันสามารถทำรหัสนี้จากพวกเขา

หวังว่านี่จะช่วยใครซักคน

สามารถปรับปรุงได้เช่นนี้:

function HideLayer(theLayer,theEvent){
 if(theLayer==(!theEvent?window.event:theEvent.target)){
  theLayer.style.display='none';
 }
}

และจากนั้นแท็ก DIV เช่นนี้:

<div onmouseout="JavaScript: HideLayer(this,event);">
 <!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>

ทั่วไปมากขึ้นไม่เพียง แต่สำหรับหนึ่ง div และไม่จำเป็นต้องเพิ่มid="..."ในแต่ละชั้น

หากคุณมีสิทธิ์เข้าถึงองค์ประกอบที่เหตุการณ์แนบอยู่ภายในmouseoutวิธีการคุณสามารถใช้contains()เพื่อดูว่าevent.relatedTargetองค์ประกอบนั้นเป็นองค์ประกอบย่อยหรือไม่

เช่นเดียวevent.relatedTargetกับองค์ประกอบที่เมาส์ได้ส่งผ่านเข้ามาหากไม่ใช่องค์ประกอบลูกคุณได้ลบออกจากองค์ประกอบแล้ว

div.onmouseout = function (event) {
    if (!div.contains(event.relatedTarget)) {
        // moused out of div
    }
}

บนเชิงมุม 5, 6 และ 7

<div (mouseout)="onMouseOut($event)"
     (mouseenter)="onMouseEnter($event)"></div>

จากนั้นใน

import {Component,Renderer2} from '@angular/core';
...
@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, OnDestroy {
...
 public targetElement: HTMLElement;

 constructor(private _renderer: Renderer2) {
 }

 ngOnInit(): void {
 }

 ngOnDestroy(): void {
  //Maybe reset the targetElement
 }

 public onMouseEnter(event): void {
  this.targetElement = event.target || event.srcElement;
  console.log('Mouse Enter', this.targetElement);
 }

 public onMouseOut(event): void {
  const elementRelated = event.toElement || event.relatedTarget;
  if (this.targetElement.contains(elementRelated)) {
    return;
  }
  console.log('Mouse Out');
 }
}

ฉันตรวจสอบออฟเซ็ตขององค์ประกอบดั้งเดิมเพื่อให้ได้พิกัดหน้าของขอบเขตขององค์ประกอบจากนั้นตรวจสอบให้แน่ใจว่าการกระทำ mouseout ถูกเรียกใช้เฉพาะเมื่อ mouseout อยู่นอกขอบเขตเหล่านั้น สกปรก แต่ใช้งานได้

$(el).live('mouseout', function(event){
    while(checkPosition(this, event)){
        console.log("mouseovering including children")
    }
    console.log("moused out of the whole")
})

var checkPosition = function(el, event){
    var position = $(el).offset()
    var height = $(el).height()
    var width = $(el).width()
    if (event.pageY > position.top 
|| event.pageY < (position.top + height) 
|| event.pageX > position.left 
|| event.pageX < (position.left + width)){
    return true
}
}

var elem = $('#some-id');
elem.mouseover(function () {
   // Some code here
}).mouseout(function (event) {
   var e = event.toElement || event.relatedTarget;
   if (elem.has(e).length > 0) return;

   // Some code here
});

หากคุณเพิ่ม (หรือมี) คลาส CSS หรือรหัสลงในองค์ประกอบพาเรนต์คุณสามารถทำสิ่งนี้ได้:

<div id="parent">
  <div>
  </div>
</div>

JavaScript:
document.getElementById("parent").onmouseout = function(e) {
  e = e ? e : window.event //For IE
  if(e.target.id == "parent") {
    //Do your stuff
  }
}

ดังนั้นสิ่งต่างๆจะได้รับการดำเนินการเมื่อกิจกรรมอยู่ใน div parent

ฉันแค่อยากจะแบ่งปันบางสิ่งกับคุณ
ฉันมีเวลาng-mouseenterและng-mouseleaveกิจกรรมที่ ยากลำบาก

กรณีศึกษา:

ฉันสร้างเมนูการนำทางแบบลอยซึ่งเป็นการสลับเมื่อเคอร์เซอร์อยู่เหนือไอคอน
เมนูนี้อยู่ด้านบนของแต่ละหน้า

• เพื่อจัดการแสดง / ซ่อนบนเมนูฉันสลับชั้นเรียน
  ng-class="{down: vm.isHover}"
• ในการสลับvm.isHoverฉันใช้เหตุการณ์เมาส์ ng
  ng-mouseenter="vm.isHover = true"
ng-mouseleave="vm.isHover = false"

สำหรับตอนนี้ทุกอย่างเรียบร้อยและทำงานตามที่คาดไว้
วิธีการแก้ปัญหานั้นสะอาดและเรียบง่าย

ปัญหาที่เข้ามา:

ในมุมมองเฉพาะฉันมีรายการองค์ประกอบ
ฉันเพิ่มแผงการกระทำเมื่อเคอร์เซอร์อยู่เหนือองค์ประกอบของรายการ
ฉันใช้รหัสเดียวกันกับด้านบนเพื่อจัดการกับพฤติกรรม

ปัญหา:

ฉันพบว่าเมื่อเคอร์เซอร์อยู่บนเมนูการนำทางลอยและที่ด้านบนขององค์ประกอบก็มีความขัดแย้งกัน
แผงการทำงานปรากฏขึ้นและการนำทางแบบลอยตัวถูกซ่อน

สิ่งนี้คือแม้ว่าเคอร์เซอร์จะอยู่เหนือเมนูการนำทางลอยองค์ประกอบรายการ ng-mouseenter จะถูกเรียกใช้
ฉันไม่เข้าท่าเพราะฉันคาดหวังว่าเหตุการณ์การแพร่กระจายเมาส์โดยอัตโนมัติ
ฉันต้องบอกว่าฉันผิดหวังและฉันใช้เวลาในการค้นหาปัญหานั้น

ความคิดแรก:

ฉันพยายามใช้สิ่งเหล่านี้:

• $event.stopPropagation()
• $event.stopImmediatePropagation()

ฉันรวมเหตุการณ์พอยน์เตอร์ ng จำนวนมาก (mousemove, mouveover, ... ) แต่ไม่มีใครช่วยฉัน

โซลูชัน CSS:

ฉันพบวิธีแก้ปัญหาด้วยคุณสมบัติ css อย่างง่ายที่ฉันใช้มากขึ้น:

pointer-events: none;

โดยทั่วไปฉันใช้แบบนั้น (ในรายการองค์ประกอบ):

ng-style="{'pointer-events': vm.isHover ? 'none' : ''}"

ด้วยเหตุการณ์ที่ยุ่งยากนี้เหตุการณ์ ng-mouse จะไม่ถูกเรียกใช้อีกต่อไปและเมนูการนำทางแบบลอยของฉันจะไม่ปิดตัวเองเมื่อเคอร์เซอร์อยู่เหนือและเหนือองค์ประกอบจากรายการ

หากต้องการไปเพิ่มเติม:

อย่างที่คุณคาดหวังวิธีแก้ปัญหานี้ใช้ได้ แต่ฉันไม่ชอบ
เราไม่ได้ควบคุมกิจกรรมของเราและมันก็ไม่ดี
นอกจากนี้คุณต้องมีสิทธิ์เข้าถึงvm.isHoverขอบเขตเพื่อให้บรรลุเป้าหมายนั้นและอาจเป็นไปไม่ได้หรือเป็นไปได้ แต่สกปรกในบางวิธีหรืออย่างอื่น
ฉันสามารถทำซอหากใครต้องการดู

อย่างไรก็ตามฉันไม่มีวิธีแก้ปัญหาอื่น ...
มันเป็นเรื่องยาวและฉันไม่สามารถให้มันฝรั่งแก่คุณได้ดังนั้นโปรดยกโทษให้ฉันด้วยเพื่อนของฉัน
ยังไงก็ตามpointer-events: noneชีวิตก็จำเอาไว้