ฉันจะตรวจจับได้อย่างไรเมื่อเมาส์ออกจากหน้าต่าง

Question 1

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

มีความคิดอย่างไรในการทำสิ่งนี้?

Question 2

โปรดทราบว่าคำตอบของฉันมีอายุมากแล้ว

โดยปกติแล้วพฤติกรรมประเภทนี้เป็นที่ต้องการในขณะที่ใช้ลักษณะการลากวางบนหน้า html โซลูชันด้านล่างได้รับการทดสอบบน IE 8.0.6, FireFox 3.6.6, Opera 10.53 และ Safari 4 บนเครื่อง MS Windows XP
ฟังก์ชั่นเล็ก ๆ น้อย ๆ จาก Peter-Paul Koch ก่อน; ตัวจัดการเหตุการณ์ข้ามเบราว์เซอร์:

function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}

จากนั้นใช้วิธีนี้เพื่อแนบตัวจัดการเหตุการณ์กับเหตุการณ์ mouseout วัตถุเอกสาร:

addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {
        // stop your drag event here
        // for now we can just use an alert
        alert("left window");
    }
});

สุดท้ายนี่คือหน้า html ที่มีสคริปต์ฝังอยู่สำหรับการดีบัก:

<html>
<head>
<script type="text/javascript">
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
addEvent(window,"load",function(e) {
    addEvent(document, "mouseout", function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
            // stop your drag event here
            // for now we can just use an alert
            alert("left window");
        }
    });
});
</script>
</head>
<body></body>
</html>

Question 3

ถ้าคุณใช้ jQuery แล้วโค้ดสั้น ๆ น่ารัก ๆ -

$(document).mouseleave(function () {
    console.log('out');
});

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

และคุณยังสามารถใช้:

$(document).mouseenter(function () {
    console.log('in');
});

เพื่อทริกเกอร์เมื่อเมาส์กลับเข้าสู่หน้าอีกครั้ง

ที่มา: https://stackoverflow.com/a/16029966/895724

Question 4

สิ่งนี้ใช้ได้กับฉัน:

addEvent(document, 'mouseout', function(evt) {
  if (evt.toElement == null && evt.relatedTarget == null) {
    alert("left window");
  }
});

Question 5

ในการตรวจจับการปล่อยเมาส์โดยไม่คำนึงถึงแถบเลื่อนและฟิลด์เติมข้อความอัตโนมัติหรือตรวจสอบ:

document.addEventListener("mouseleave", function(event){

  if(event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight))
  {

     console.log("I'm out");

  }
});

คำอธิบายเงื่อนไข:

event.clientY <= 0  is when the mouse leave from the top
event.clientX <= 0  is when the mouse leave from the left
event.clientX >= window.innerWidth is when the mouse leave from the right
event.clientY >= window.innerHeight is when the mouse leave from the bottom

======================== แก้ไข ========================= ======

document.addEventListener ("mouseleave") ดูเหมือนว่าจะไม่ทำงานใน Firefox เวอร์ชันใหม่จำเป็นต้องแนบ mouseleave เข้ากับองค์ประกอบเช่น body หรือองค์ประกอบย่อย

ผมแนะนำให้ใช้แทน

document.body.addEventListener("mouseleave")

หรือ

window.addEventListener("mouseout")

Question 6

การใช้เหตุการณ์ onMouseLeave ช่วยป้องกันการเกิดฟองและช่วยให้คุณตรวจจับได้ง่ายเมื่อเมาส์ออกจากหน้าต่างเบราว์เซอร์

<html onmouseleave="alert('You left!')"></html>

http://www.w3schools.com/jsref/event_onmouseleave.asp

Question 7

คำตอบเหล่านี้ไม่ได้ผลสำหรับฉัน ตอนนี้ฉันใช้:

document.addEventListener('dragleave', function(e){

    var top = e.pageY;
    var right = document.body.clientWidth - e.pageX;
    var bottom = document.body.clientHeight - e.pageY;
    var left = e.pageX;

    if(top < 10 || right < 20 || bottom < 10 || left < 10){
        console.log('Mouse has moved out of window');
    }

});

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

Question 8

ฉันได้ลองทำทุกอย่างข้างต้นแล้ว แต่ดูเหมือนจะไม่มีอะไรเป็นไปตามที่คาด หลังจากการวิจัยน้อยฉันพบว่าe.relatedTargetเป็นHTMLเพียงก่อนเมาส์ออกจากหน้าต่าง

ดังนั้น ... ฉันจบลงด้วยสิ่งนี้:


document.body.addEventListener('mouseout', function(e) {
    if (e.relatedTarget === document.querySelector('html')) {
        console.log('We\'re OUT !');
    }
});

โปรดแจ้งให้เราทราบหากคุณพบปัญหาหรือการปรับปรุงใด ๆ !

อัปเดต 2019

(ตามที่ user1084282 ค้นพบ)

document.body.addEventListener('mouseout', function(e) {
    if (!e.relatedTarget && !e.toElement) {
        console.log('We\'re OUT !');
    }
});

Question 9

ฉันเอาสิ่งที่ฉันพูดกลับไป มันเป็นไปได้. ฉันเขียนโค้ดนี้ทำงานได้อย่างสมบูรณ์

window.onload = function() {

    $span = document.getElementById('text');

    window.onmouseout = function() {
        $span.innerHTML = "mouse out";  
    }

    window.onmousemove = function() {
        $span.innerHTML = "mouse in";   
    }

}

ทำงานใน chrome, firefox, opera ไม่ได้ทดสอบใน IE แต่คิดว่ามันใช้งานได้

แก้ไข. IE มักทำให้เกิดปัญหา เพื่อให้ทำงานใน IE ให้แทนที่เหตุการณ์จากหน้าต่างเป็นเอกสาร:

window.onload = function() {

    $span = document.getElementById('text');

    document.onmousemove = function() {
        $span.innerHTML = "mouse move";
    }

    document.onmouseout = function() {
        $span.innerHTML = "mouse out";
    }

}

รวมเข้าด้วยกันสำหรับ crossbrowser kick ass cursor detection o0: P

Question 10

ใช้ css นี้:

html
{
height:100%;
}

เพื่อให้แน่ใจว่าองค์ประกอบ html จะใช้ความสูงทั้งหมดของหน้าต่าง

ใช้ jquery นี้:

$("html").mouseleave(function(){
 alert('mouse out');
});

ปัญหาเกี่ยวกับการวางเมาส์เหนือและการวางเมาส์คือถ้าคุณวางเมาส์เหนือ / ออกจาก html ไปยังองค์ประกอบลูกก็จะปิดเหตุการณ์นั้น ฟังก์ชั่นที่ฉันให้จะไม่ถูกปิดเมื่อวางเมาส์ไว้ที่องค์ประกอบลูก จะถูกตั้งค่าไว้เมื่อคุณเลื่อนเมาส์ออก / ออกจากหน้าต่างเท่านั้น

เพียงเพื่อให้คุณรู้ว่าคุณสามารถทำได้เมื่อผู้ใช้ mouses ในหน้าต่าง:

$("html").mouseenter(function(){
  alert('mouse enter');
});

Question 11

ฉันลองทำทีละคำและพบคำตอบที่ดีที่สุดในเวลานั้น:

https://stackoverflow.com/a/3187524/985399

ฉันข้ามเบราว์เซอร์เก่าดังนั้นฉันจึงทำให้โค้ดสั้นลงเพื่อให้ทำงานบนเบราว์เซอร์สมัยใหม่ (IE9 +)

    document.addEventListener("mouseout", function(e) {
        let t = e.relatedTarget || e.toElement;
        if (!t || t.nodeName == "HTML") {
          console.log("left window");
        }
    });

document.write("<br><br>PROBLEM<br><br><div>Mouseout trigg on HTML elements</div>")

ขยายข้อมูลโค้ด

ที่นี่คุณจะเห็นการสนับสนุนเบราว์เซอร์

นั่นค่อนข้างสั้นที่ฉันคิด

แต่ปัญหายังคงอยู่เพราะ"mouseout" Trigg ในองค์ประกอบทั้งหมดในเอกสาร

เพื่อป้องกันไม่ให้เกิดขึ้นให้ใช้mouseleave (IE5.5 +) ดูคำอธิบายดีๆในลิงค์

โค้ดต่อไปนี้ใช้งานได้โดยไม่ต้องทริกเกอร์องค์ประกอบภายในองค์ประกอบให้อยู่ภายในหรือภายนอก ลองลากปล่อยนอกเอกสารด้วย

var x = 0

document.addEventListener("mouseleave", function(e) { console.log(x++) 
})

document.write("<br><br>SOLUTION<br><br><div>Mouseleave do not trigg on HTML elements</div>")

ขยายข้อมูลโค้ด

คุณสามารถตั้งค่าเหตุการณ์ในองค์ประกอบ HTML ใดก็ได้ อย่าเปิดเหตุการณ์ไว้document.bodyเนื่องจากแถบเลื่อนของหน้าต่างอาจหดตัวและเริ่มทำงานเมื่อตัวชี้เมาส์อยู่ชิดแถบเลื่อนเมื่อคุณต้องการเลื่อน แต่ไม่ต้องการเรียกใช้เมาส์ทิ้งเหตุการณ์ไว้เหนือมัน ตั้งค่าdocumentแทนดังในตัวอย่าง

Question 12

บางทีถ้าคุณฟัง OnMouseOver ในแท็ก body อยู่ตลอดเวลาให้โทรกลับเมื่อเหตุการณ์ไม่เกิดขึ้น แต่ในขณะที่ Zack ระบุสิ่งนี้อาจน่าเกลียดมากเพราะไม่ใช่ทุกเบราว์เซอร์ที่จัดการเหตุการณ์ในลักษณะเดียวกันมีแม้แต่บางตัว ความเป็นไปได้ที่คุณจะสูญเสีย MouseOver แม้จะอยู่เหนือ div ในหน้าเดียวกัน

Question 13

บางทีนี่อาจจะช่วยบางคนที่มาที่นี่ในภายหลัง window.onblurและdocument.mouseout.

window.onblur ถูกทริกเกอร์เมื่อ:

คุณเปลี่ยนไปใช้หน้าต่างอื่นโดยใช้Ctrl+TabหรือCmd+Tabหรือ
คุณโฟกัส (ไม่ใช่แค่วางเมาส์เหนือ) บนตัวตรวจสอบเอกสาร
คุณสลับเดสก์ท็อป

โดยทั่วไปทุกเวลาที่แท็บเบราว์เซอร์สูญเสียโฟกัส

window.onblur = function(){
    console.log("Focus Out!")
}

document.mouseout ถูกทริกเกอร์เมื่อ:

คุณเลื่อนเคอร์เซอร์ไปที่แถบชื่อเรื่อง
คุณสลับไปยังหน้าต่างอื่นใช้หรือCtrl+TabCmd+Tab
คุณเปิดเลื่อนเคอร์เซอร์ไปที่ตัวตรวจสอบเอกสาร

โดยทั่วไปไม่ว่าในกรณีใด ๆ เมื่อเคอร์เซอร์ของคุณออกจากเอกสาร

document.onmouseleave = function(){
    console.log("Mouse Out!")
}

Question 14

$(window).mouseleave(function(event) {
  if (event.toElement == null) {
    //Do something
  }
})

อาจจะแฮ็คนิดหน่อย แต่จะเริ่มทำงานเมื่อเมาส์ออกจากหน้าต่างเท่านั้น ฉันจับเหตุการณ์เด็ก ๆ มาเรื่อย ๆ และสิ่งนี้ก็แก้ไขได้

Question 15

$(window).mouseleave(function() {
 alert('mouse leave');
});

Question 16

สิ่งนี้ได้ผลสำหรับฉัน รวมคำตอบบางส่วนไว้ที่นี่ และฉันใส่รหัสที่แสดงโมเดลเพียงครั้งเดียว และโมเดลจะหายไปเมื่อคลิกที่อื่น

<script>
    var leave = 0
    //show modal when mouse off of page
    $("html").mouseleave(function() {
       //check for first time
       if (leave < 1) {
          modal.style.display = "block";
          leave = leave + 1;
       }
    });

    // Get the modal with id="id01"
       var modal = document.getElementById('id01');

    // When the user clicks anywhere outside of the modal, close it
       window.onclick = function(event) {
          if (event.target == modal) {
             modal.style.display = "none";
          }
       }
</script>

Question 17

ดูและmouseovermouseout

var demo = document.getElementById('demo');
document.addEventListener("mouseout", function(e){demo.innerHTML="😞";});
document.addEventListener("mouseover", function(e){demo.innerHTML="😊";});

div { font-size:80vmin; position:absolute;
      left:50%; top:50%; transform:translate(-50%,-50%); }

<div id='demo'>😐</div>

ขยายข้อมูลโค้ด

Question 18

ฉันยังไม่ได้ทดสอบ แต่สัญชาตญาณของฉันคือการเรียกใช้ฟังก์ชัน OnMouseOut บนแท็กร่างกาย

Question 19

สิ่งนี้จะทำงานใน Chrome

$(document).bind('dragleave', function (e) {
    if (e.originalEvent.clientX == 0){
        alert("left window");
    }
});