사용자의 마우스가 다른 곳에있는 동안 이벤트 발생을 중지 할 수 있도록 마우스가 창을 떠날 때를 감지 할 수 있기를 원합니다.
이를 수행하는 방법에 대한 아이디어가 있습니까?
답변
내 대답이 많이 낡았 음을 명심하십시오.
이러한 유형의 동작은 일반적으로 html 페이지에서 끌어서 놓기 동작을 구현할 때 필요합니다. 아래 솔루션은 MS Windows XP 시스템의 IE 8.0.6, FireFox 3.6.6, Opera 10.53 및 Safari 4에서 테스트되었습니다.
먼저 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>답변
jQuery를 사용하는 경우이 짧고 달콤한 코드는 어떻습니까?
$(document).mouseleave(function () {
console.log('out');
});이 이벤트는 원하는대로 페이지에 마우스가 없을 때마다 트리거됩니다. 원하는대로 기능을 변경하면됩니다.
다음을 사용할 수도 있습니다.
$(document).mouseenter(function () {
console.log('in');
});마우스가 페이지로 다시 들어갈 때 트리거합니다.
출처 : https://stackoverflow.com/a/16029966/895724
답변
이것은 나를 위해 작동합니다.
addEvent(document, 'mouseout', function(evt) {
if (evt.toElement == null && evt.relatedTarget == null) {
alert("left window");
}
});답변
스크롤 막대와 autcomplete 필드를 고려하지 않고 mouseleave를 감지하거나 검사하려면 다음을 수행하십시오.
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”)는 새 파이어 폭스 버전에서 실행되지 않는 것 같습니다. mouseleave는 body 또는 자식 요소와 같은 요소에 첨부되어야합니다.
대신 사용하는 것이 좋습니다
document.body.addEventListener("mouseleave")또는
window.addEventListener("mouseout")답변
onMouseLeave 이벤트를 사용하면 버블 링을 방지하고 마우스가 브라우저 창을 벗어날 때 쉽게 감지 할 수 있습니다.
<html onmouseleave="alert('You left!')"></html>답변
이 답변 중 어느 것도 나를 위해 일하지 않았습니다. 나는 지금 사용하고 있습니다 :
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');
}
});드래그 앤 드롭 파일 업로드 위젯에 사용하고 있습니다. 절대적으로 정확하지는 않으며 마우스가 창 가장자리에서 특정 거리에 도달하면 트리거됩니다.
답변
위의 모든 것을 시도했지만 예상대로 작동하지 않는 것 같습니다. 약간의 조사 끝에 나는 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 !');
}
});