जब माउस खिड़की छोड़ता है तो मैं कैसे पता लगा सकता हूं?

102

मैं यह पता लगाना चाहता हूं कि जब माउस खिड़की छोड़ता है तो मैं घटनाओं को फायरिंग से रोक सकता हूं जबकि उपयोगकर्ता का माउस कहीं और है।

यह कैसे करना है के कोई विचार?

javascript  browser  mouse 
1
इस beeker बाहर निकलने के इरादे github पुस्तकालय की जाँच करें। यह बहुत अच्छा है। github.com/beeker1121/exit-intent-popup
— raksheetbhat
उपयोग mouseleave सभी तत्वों के रूप में पर फायरिंग रोकने के लिए mouseout : बहुत अच्छा विवरण और समर्थन: करता developer.mozilla.org/en-US/docs/Web/API/Element/...
दस्तावेज़ पर ईवेंट सेट करें - दस्तावेज़ नहीं। आग अबॉर्ज़ स्क्रॉल-बार को रोकने के लिए। विंडोज स्क्रॉलबार लगता है कि शरीर सिकुड़ गया है।

जवाबों:

100

कृपया ध्यान रखें कि मेरे उत्तर की आयु बहुत हो चुकी है।

किसी HTML पृष्ठ पर ड्रैग-ड्रॉप व्यवहार को लागू करते समय इस प्रकार का व्यवहार आम तौर पर वांछित होता है। नीचे दिए गए समाधान IE 8.0.6, फ़ायर्फ़ॉक्स 3.6.6, ओपेरा 10.53, और सफारी 4 का एमएस विंडोज एक्सपी मशीन पर परीक्षण किया गया था।
पीटर-पॉल कोच से पहला समारोह; पार ब्राउज़र घटना हैंडलर:

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

और फिर इस विधि का उपयोग एक ऑब्जेक्ट हैंडलर को दस्तावेज़ ऑब्जेक्ट्स माउसआउट ईवेंट में संलग्न करने के लिए करें:

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>
— जे मिल्स
स्रोत
Window.event का उपयोग करके मेरी समस्या इस घटना को ठीक कर रही है। धन्यवाद!
— Jay
ऐसा लगता है कि जब माउस क्रोम में दबाया नहीं गया है तो यह आग नहीं करता है। जब माउस क्रोम में दबाया जाता है तो यह आग करता है। असंगत व्यवहार की तरह लगता है।
— एंटनी.रूपे
5
यदि अन्य HTML तत्व विंडो को भर रहे हैं तो यह काम नहीं करता है।
— इमैनुएल
इस समाधान के साथ समस्या यह है कि यह बाईं विंडो को सचेत करता है भले ही उपयोगकर्ता सिर्फ स्क्रोलर का उपयोग करने का प्रयास करे। मैंने इस समस्या का हल यहां प्रकाशित किया है , लेकिन अभी भी एक समस्या का हल होना है (लिंक देखें)।
— जॉनीफ्री
1
दस्तावेज़ में तत्वों पर आग को रोकने के लिए माउसआउट के बजाय मूसलीव का उपयोग करें । बहुत अच्छी व्याख्या और यह IE5.5 पर काम करता है ... developer.mozilla.org/en-US/docs/Web/API/Element/…
42

यदि आप jQuery का उपयोग कर रहे हैं तो इस छोटे और मीठे कोड के बारे में कैसे -

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

जब भी माउस आपके पृष्ठ में नहीं होगा, तब यह घटना शुरू हो जाएगी। बस जो आप चाहते हैं उसे करने के लिए फ़ंक्शन बदलें।

और आप भी इस्तेमाल कर सकते हैं:

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

ट्रिगर करने के लिए जब माउस फिर से पृष्ठ पर वापस प्रवेश करता है।

स्रोत: https://stackoverflow.com/a/16029966/895724

— मनदीप जंजुआ
स्रोत
mouseleave काम कर रहा है लेकिन यह भी गोलीबारी कर रहा है यदि निरीक्षण तत्व खोला गया है, तो कैसे रोकें? विचार?
— पंकज वर्मा
यह तकनीक Chrome 15 से 56 (मेरा वर्तमान संस्करण) में स्थिर नहीं है। लेकिन यह फ़ायरफ़ॉक्स में बहुत काम करेगा। देखें: stackoverflow.com/questions/7448468/…
— Tremours
Mouseleave की तुलना में बहुत अधिक आग लगनी चाहिए।
— अलेक्जेंडर
यह भी अगर आग पृष्ठभूमि में है (ब्राउज़र ध्यान केंद्रित नहीं है) और माउस खिड़की (क्रोम 61 / macOS10.11) में प्रवेश करता है, तो आग लगाता है
— CodeBrauer
1
@Skeets (और भविष्य के पाठक) इस अंक को 14 फरवरी, 2019 तक के रूप में चिह्नित किया गया है
— Xandor
27

यह मेरे लिए काम करता है:

addEvent(document, 'mouseout', function(evt) {
  if (evt.toElement == null && evt.relatedTarget == null) {
    alert("left window");
  }
});
— user1084282
स्रोत
9
क्या है addEvent?
— यी जियांग
5
— सुपरजोस
4
ie8 पर, संबंधितटार्ग अपरिभाषित है, अर्थात 9 + और फायरफॉक्स पर, अप्रभावी अपरिभाषित है। क्योंकि यह सही मूल्यांकन है: अगर ((evt.relatedTarget === null) || (evt.toElement === null)) {
— carlos
1
विधेय अधिक संक्षिप्त हो सकता हैif (!evt.toElement && !evt.relatedTarget)
— Pavel Ye
20

स्क्रॉल पट्टी और स्वत: पूर्ण फ़ील्ड या निरीक्षण का ध्यान रखे बिना मूसलीव का पता लगाने के लिए:

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

======================== EDIT ============================ ======

document.addEventListener ("mouseleave") को नए फ़ायरफ़ॉक्स संस्करण पर निकाल दिया जाना प्रतीत नहीं होता है, mouseleave को शरीर या एक बाल तत्व जैसे तत्व से जुड़ा होना चाहिए।

मैं इसके बजाय उपयोग करने का सुझाव देता हूं 

document.body.addEventListener("mouseleave")

या

window.addEventListener("mouseout")
— Daphoque
स्रोत
समय-समय पर निकाल नहीं दिया गया। जब सीमांकन के उद्देश्य से चलती हुई धारा के एक बिंदु पर सीमा और लक्ष्य का आकार बदल जाता है तो यह विफल हो जाता है।
— इवान बोरशचोव
@ user3479125, क्या आप इसे मेरे स्निपेट पर भी आज़मा सकते हैं और यह देख सकते हैं कि यदि समस्या-कथन को जोड़ा नहीं गया तो क्या समस्या बनी रहेगी? यह स्क्रॉल बार को ध्यान में रखता है लेकिन मैंने स्वत: पूर्ण या निरीक्षण के साथ परीक्षण नहीं किया है। stackoverflow.com/a/56678357/985399
7

OnMouseLeave ईवेंट का उपयोग बुदबुदाहट को रोकता है और जब माउस ब्राउज़र विंडो को छोड़ता है, तो आप आसानी से पता लगा सकते हैं।

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

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

— समी बेन्चरिफ़
स्रोत
बहुत खुबस! समर्थन IE5.5 + है ... वर्क्स भी: document.onmouseleave = function() { alert('You left!') };डॉक्युमेंट का उपयोग न करें। जो एरो को स्क्रॉल करता है जो बॉडी को सिकोड़ता है! तत्वों पर आग को रोकने के लिए कोड की आवश्यकता नहीं है। अच्छी व्याख्या: developer.mozilla.org/en-US/docs/Web/API/Element/…
6

इनमें से किसी भी जवाब ने मेरे लिए काम नहीं किया। अब मैं उपयोग कर रहा हूँ:

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');
    }

});

मैं इसका उपयोग ड्रैग एंड ड्रॉप फ़ाइल अपलोडिंग विजेट के लिए कर रहा हूँ। यह बिल्कुल सटीक नहीं है, जब माउस खिड़की के किनारे से एक निश्चित दूरी पर हो जाता है।

— एम्मानुएल
स्रोत
मेरा मानना ​​है कि यह कभी-कभी ट्रिगर नहीं होगा यदि माउस आंदोलन "पर्याप्त तेज" है।
— जॉन वीज़
@ जोहानिसज़ हाँ, मुझे लगता है कि आप सही हैं। मैंने अभी कुछ समय के लिए इस स्क्रिप्ट का उपयोग किया है और यह हालांकि अच्छी तरह से काम करता है।
— इमैनुएल
6

मैंने उपरोक्त सभी की कोशिश की है, लेकिन कुछ भी उम्मीद के मुताबिक काम नहीं करता है। थोड़ी खोजबीन के बाद मैंने पाया कि e.relatedTarget है एचटीएमएल बस से पहले माउस खिड़की बाहर निकालता है ।

तो ... मैं इसके साथ अंत कर रहा हूँ:


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 !');
    }
});
— Claudiu
स्रोत
2
क्रोम पर मेरे लिए काम नहीं कर रहा। relatedTargetजब माउस खिड़की से बाहर निकल जाता है। @ User1084282 के उत्तर से प्रेरित होकर, इसे इसे बदलें: if(!e.relatedTarget && !e.toElement) { ... }और यह काम करता है
मैं पुष्टि करता हूं कि यह क्रोम, फ़ायरफ़ॉक्स और IE एज पर ठीक काम करता है, यदि आप if(!e.relatedTarget && !e.toElement)वास्तविक उत्तर में शर्त के बजाय उपयोग करते हैं। यह पता लगाता है कि माउस दस्तावेज़ शरीर को छोड़ देता है।
— हाईजेरोम
दस्तावेज़ पर ईवेंट नहीं है। कोई भी नहीं क्योंकि विंडोज़ स्क्रॉलबार इसे सिकोड़ सकता है और स्क्रॉल को आग लगा सकता है। और आपके पास 'माउसआउट' क्यों है जो सभी बुदबुदाते तत्वों पर आग लगाता है जब आपके पास 'मूसलीव' हो सकता है? developer.mozilla.org/en-US/docs/Web/API/Element/…
2

मैंने जो कहा, उसे वापस लेता हूं। हो सकता है। मैंने यह कोड लिखा था, पूरी तरह से काम करता है।

window.onload = function() {

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

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

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

}

क्रोम, फ़ायरफ़ॉक्स, ओपेरा में काम करता है। आईई में परीक्षण किया गया, लेकिन यह काम करता है मान।

संपादित करें। IE हमेशा परेशानी का कारण बनता है। IE में इसे काम करने के लिए, विंडो से दस्तावेज़ में घटनाओं को बदलें:

window.onload = function() {

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

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

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

}

क्रॉसब्रोसर किक गधा कर्सर का पता लगाने के लिए उन्हें गठबंधन करें o0: P

— ओजी
स्रोत
क्या आपने परीक्षण किया है कि यह पृष्ठ पर तत्वों के साथ मिलकर कितना अच्छा काम करता है? मुझे लगता है कि जिन तत्वों की अपनी 'ऑनमाउसओवर / आउट' घटनाएं होती हैं, वे संभावित रूप से बुदबुदाई को रद्द कर सकते हैं और इस कार्यक्षमता को तोड़ सकते हैं।
— डेन हर्बर्ट
1
ओज़ी, डैन यह समझाने की कोशिश कर रहे हैं कि एक तत्व जो घटना के प्रचार को रोकता है, वह घटना को दस्तावेज़ / खिड़की तक पहुंचने से रोक देगा, जिससे आपका समाधान अप्रभावी हो जाएगा।
— जेम्स
मैंने इसे अन्य तत्वों के साथ अपने स्वयं के onmousemove और onmouseout घटनाओं के साथ परीक्षण किया और यह अभी भी ठीक काम करता है।
— ओजेजी
2
हाँ ठीक है, लेकिन फिर से हम घटना प्रसार के बारे में बात कर रहे हैं। यदि आप EVENT.stopPropagation () (IE, EVENT.cancelBubble = true के लिए) के साथ ईवेंट के प्रचार को रोक देते हैं, तो यह दस्तावेज़ / विंडो तक बबल नहीं होगा ... इसके लिए आप उन ब्राउज़र में ईवेंट कैप्चरिंग का उपयोग कर सकते हैं जो इसका समर्थन करते हैं ।
— जेम्स
याद रखें कि जेएस में एक चर घोषित करने के लिए, आपको 'var' का उपयोग करना होगा। अब वैरिएबल $ स्पैन एक निहित वैश्विक है, जो संभवतः वह नहीं है जो आप चाहते हैं। इसके अलावा अगर यह जानबूझकर नहीं है, तो आपको चर नामों में $ की आवश्यकता नहीं है।
— बजे जानी हार्टिकैनन
2

इस सीएसएस को लागू करें:

html
{
height:100%;
}

यह सुनिश्चित करता है कि html तत्व विंडो की पूरी ऊंचाई लेता है।

इस jquery को लागू करें:

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

माउसओवर और माउसआउट के साथ समस्या यह है कि यदि आप html से बाहर किसी बच्चे के तत्व पर माउस ले जाते हैं तो यह घटना को बंद कर देगा। मेरे द्वारा दिए गए फ़ंक्शन को चाइल्ड एलिमेंट में मूसिंग के दौरान सेट नहीं किया गया है। यह केवल तब सेट किया जाता है जब आप विंडो से बाहर / बाहर जाते हैं

बस आपको यह जानने के लिए कि आप यह तब कर सकते हैं जब उपयोगकर्ता विंडो में बैठते हैं:

$("html").mouseenter(function(){
  alert('mouse enter');
});
— www139
स्रोत
2
"मुझे विश्वास नहीं है कि जावास्क्रिप्ट का एक समान कार्य है", आपका मतलब है, आपको नहीं पता है कि jQuery IS एक जावास्क्रिप्ट फ़ंक्शन लाइब्रेरी है और जावास्क्रिप्ट के साथ और jQuery के लिए लिखा है?
— मिल्के पैटरन
2
@MilchePatern मैंने यह उत्तर लगभग दो साल पहले लिखा था। मैं तब और अधिक अज्ञानी था और मुझे इस तथ्य का एहसास नहीं था कि jQuery में किया गया कुछ भी शुद्ध जावास्क्रिप्ट में किया जा सकता है। मैं जवाब को अपडेट करूंगा ...
— www139
2

मैंने एक के बाद एक कोशिश की और उस समय सबसे अच्छा जवाब मिला:

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>")
स्निपेट का विस्तार करें

यहां आपको ब्राउज़र सपोर्ट दिखाई देता है

मुझे लगा कि यह बहुत कम है

लेकिन एक समस्या अभी भी बनी हुई है क्योंकि दस्तावेज़ में सभी तत्वों पर "माउसआउट" शुरू हो गया ।

इसे होने से रोकने के लिए, मूसलीव (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उदाहरण के रूप में इसके बजाय इसे सेट करें ।

1

हो सकता है कि अगर आप लगातार बॉडी टैग में ऑनमॉउसओवर सुन रहे हैं, तो कॉलबैक तब करें जब ईवेंट समुद्र में न आ रहा हो, लेकिन, जैसा कि जैक कहता है, यह बहुत ही बदसूरत हो सकता है, क्योंकि सभी ब्राउज़र एक ही तरह से इवेंट को हैंडल नहीं करते हैं, कुछ और भी है संभावना है कि आप एक ही पृष्ठ में एक div पर होने से भी माउस खो देते हैं।

— पाब्लो अल्बोर्नोज़
स्रोत
इसका उत्तर नहीं है
1

शायद इससे बाद में यहां आने वालों में से कुछ को मदद मिलेगी। window.onblurऔर document.mouseout।

window.onblur जब ट्रिगर किया जाता है:

  • आप किसी अन्य विंडो का उपयोग करके स्विच करते हैं Ctrl+Tabया Cmd+Tab।
  • आप दस्तावेज़ निरीक्षक पर ध्यान केंद्रित करते हैं (सिर्फ माउसओवर नहीं)।
  • आप डेस्कटॉप स्विच करते हैं।

मूल रूप से किसी भी समय ब्राउज़र टैब फोकस खो देता है।

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

document.mouseout जब ट्रिगर किया जाता है:

  • आप टाइटल बार पर कर्सर ले जाते हैं।
  • आप किसी अन्य विंडो का उपयोग करके स्विच करते हैं Ctrl+Tabया Cmd+Tab।
  • आप दस्तावेज़ इंस्पेक्टर पर कर्सर ले जाएँ।

मूल रूप से किसी भी मामले में जब आपका कर्सर दस्तावेज़ छोड़ देता है।

document.onmouseleave = function(){
    console.log("Mouse Out!")
}
— जयंत भवाल
स्रोत
"कभी-कभार THAT ब्राउज़र टैब फोकस खो देता है।" .. IE पुराने संस्करणों के साथ, 'कलंक' घटना DOM कंपाइल की जाती है / जब कोई अन्य तत्व फ़ोकस को पुन: फोकस करता है, gooChrome के लिए, यह तब होता है जब तत्व स्वयं फोकस खो देता है .. बस उल्लेख करने के लिए।
— मिल्के पैटरन
स्मार्ट का उपयोग window.onblurभी। +1
— रेडवॉल्फ प्रोग्राम्स
1 
$(window).mouseleave(function(event) {
  if (event.toElement == null) {
    //Do something
  }
})

यह थोड़ा हैकी हो सकता है लेकिन यह केवल तभी ट्रिगर होगा जब माउस विंडो को छोड़ देगा। मैं बाल घटनाओं को पकड़ता रहा और इसने इसे हल किया

— Cekaleek
स्रोत
1

इसने मेरे लिए काम किया। यहाँ कुछ उत्तरों का संयोजन। और मैंने केवल एक बार एक मॉडल दिखाने वाला कोड शामिल किया। और मॉडल कहीं और क्लिक करने पर चला जाता है।

<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>
— मॉर्गन हेस
स्रोत
प्रश्न पर कोई jQuery टैग नहीं था
— mrReiha
jQuery मेरे जवाबों की तुलना में बहुत अधिक कोड है जो आधुनिक ब्राउज़रों IE9 + और बाकी पर काम करता है। यह इस उत्तर पर आधारित है, लेकिन बहुत छोटा है: stackoverflow.com/a/3187524/985399
1

देखें mouseoverऔर mouseout।

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>
स्निपेट का विस्तार करें

— ashleedawg
स्रोत
0

मैंने इसका परीक्षण नहीं किया है, लेकिन मेरी वृत्ति शरीर टैग पर एक OnMouseOut फ़ंक्शन कॉल करने के लिए होगी।

— Ender
स्रोत
-2

यह क्रोम में काम करेगा,

$(document).bind('dragleave', function (e) {
    if (e.originalEvent.clientX == 0){
        alert("left window");
    }
});
— anupraj
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.