जावास्क्रिप्ट घटना जब माउस ब्राउज़र विंडो छोड़ देता है

जब माउस ब्राउज़र विंडो को छोड़ देता है तो मुझे कुछ जावास्क्रिप्ट कोड चलाने की इच्छा है। मैं केवल सफारी समर्थन करने की आवश्यकता (वेबकिट।)जावास्क्रिप्ट घटना जब माउस ब्राउज़र विंडो छोड़ देता है

मैं खिड़की पर एक mouseout हैंडलर डालने की कोशिश की। उस हैंडलर को विश्वसनीय रूप से बुलाया जाता है जब माउस ब्राउज़र विंडो छोड़ देता है। लेकिन जब यह माउस दस्तावेज़ में तत्वों के बीच चलता है तो इसे बुलबुले करने के कारण भी कहा जाता है। मैं यह नहीं समझ सकता कि माउस ने वास्तव में विंडो को कब छोड़ा है और जब यह केवल तत्वों के बीच स्थानांतरित हो गया है।

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

(वही बात तब होती है जब मैं दस्तावेज़ या दस्तावेज़ पर किसी हैंडलर डालता हूं, उस आश्चर्यजनक दस्तावेज को छोड़कर। माउस को माउसओवर/माउसआउट घटनाएं नहीं मिलती हैं जब माउस खिड़की के खाली भाग में प्रवेश करता है या छोड़ देता है, जैसे कि खाली खड़ी बिल्कुल द्वारा बनाई अंतरिक्ष स्थिति नीचे के साथ एक तत्व:।। 0 के लिए है कि अंतरिक्ष, दस्तावेज़ और खिड़की लक्ष्य किया जा रहा < एचटीएमएल > साथ माउसओवर/mouseout घटनाओं मिल जाएगा, लेकिन document.body नहीं होगा)

कुछ विचार मैं था:

प्रत्येक माउसआउट ईवेंट पर, माउस की वास्तविक स्थिति प्राप्त करें और देखें कि यह वास्तव में खिड़की पर है या नहीं। लेकिन मुझे नहीं पता कि यह वास्तव में संभव है और ऐसा लगता है कि सभी दौड़ स्थितियों को खत्म करना मुश्किल होगा।
एक माउसओवर हैंडलर भी पंजीकृत करें और उन मामलों का पता लगाएं जहां माउसआउट को माउसओवर द्वारा आगे बढ़ाया नहीं जाता है (या जल्द ही पीछा किया जाता है)। लेकिन इसके लिए एक टाइमर की आवश्यकता होगी।

हम prototype.js का उपयोग करते हैं तो आदर्श रूप से मैं प्रोटोटाइप के Event.observe के संदर्भ में समाधान व्यक्त करना चाहता हूं, लेकिन मैं उस भाग को समझ सकता हूं।

किसी भी सुझाव के लिए धन्यवाद!

स्रोत

2009-11-04 Geoff

MooTools MouseEnter/MouseLeave कस्टम ईवेंट (http://demos.mootools.net/Mouseenter) प्रदान करता है। मुझे प्रोटोटाइप नहीं पता, लेकिन क्या यह कुछ समान नहीं है? – Duroth

@Duroth सूचक के लिए धन्यवाद। प्रोटोटाइप 1.6.1 प्रकट नहीं होता है, लेकिन यह 1.6.2 मई की तरह दिखता है। – Geoff

सारांश: यह mouseout घटना के दौरान relatedTarget संपत्ति की जाँच करके सफाई से किया जा सकता है। यदि संबंधित लक्ष्य लक्ष्य दस्तावेज़ का बच्चा नहीं है, तो माउस ने विंडो को छोड़ दिया है। अपने आप को करना आसान है, लेकिन यदि आप नहीं चाहते हैं, तो कुछ पुस्तकालयों (मुट्टूल, भविष्य प्रोटोटाइप ..) ने कार्यक्षमता में बेक किया है, और अन्य (वर्तमान प्रोटोटाइप) में एक्सटेंशन उपलब्ध हैं। आईई पर, आप इसके बजाय माउसलेव का उपयोग कर सकते हैं, जो माउसआउट का एक गैर-बुलबुला संस्करण है।

विवरण:

आईई कि माउसओवर और mouseout के गैर उत्साह से भरा हुआ संस्करण हैं mouseenter और mouseleave कहा जाता है की घटनाओं है। अन्य ब्राउज़र नहीं करते हैं, लेकिन अगर उन्होंने किया, तो विंडो या दस्तावेज़ पर माउसलीव श्रोता सेट करना चाल करेगा।

एक केन स्नाइडर नामित सज्जन बचाव के लिए आता:

माउसओवर पर, relatedTarget संपत्ति संदर्भ से नोड जो सूचक आया था। एक mouseout पर, relatedTarget संपत्ति संदर्भ जो करने के लिए नोड सूचक went.On किसी भी घटना, गुंजाइश नोड जो घटना relatedTarget attached.When है currentTarget की एक नहीं बच्चे, एक माउसओवर इवेंट माउसस्टर ईवेंट के समतुल्य है और माउसआउट ईवेंट माउसलेव ईवेंट के बराबर है।

- http://kendsnyder.com/archives/6-MouseEnter-and-MouseLeave.html

यह यह संभव mouseenter को लागू करने और अन्य ब्राउज़र में mouseleave है। वास्तव में, केन ऐसा करने के लिए एक ही प्रोटोटाइप कोड प्रदान करता है: http://kendsnyder.com/sandbox/enterleave/MouseEnterLeave.js

दुरोथ ने टिप्पणियों में बताया कि म्यूटूल में पहले से ही कुछ समान है। (धन्यवाद दुरथ।) ऐसा लगता है कि आगामी प्रोटोटाइप रिलीज (1.6.2) में यह कार्यक्षमता शामिल हो सकती है, लेकिन मुझे कुछ भी निश्चित नहीं मिल रहा है।

स्रोत

2009-11-04 08:42:46 Geoff

अपडेट: ऐसा लगता है कि यह अब एफएफ 10+, क्रोम 30+ और ओपेरा में आईई के साथ मौजूद है - https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave – snappieT

-1

आप एक खिड़की पर onmouseout घटना का उपयोग कर सकते बजाय

स्रोत

2009-11-04 07:19:49 DVK

यह वास्तव में मैंने कोशिश की है (खेद है कि स्पष्ट नहीं था। मैंने स्पष्ट करने के लिए प्रश्न संपादित किया।) मैं उस मामले को कैसे अलग कर सकता हूं जहां माउस ने उस मामले से खिड़की छोड़ी है जहां माउस केवल तत्वों के बीच स्थानांतरित हो गया है, और बुलबुले के कारण हैंडलर बुलाया जा रहा है? – Geoff

केवल जावास्क्रिप्ट, कोई प्रोटोटाइप या jQuery आदि का उपयोग करना

<html> 
<head> 
<script type="text/javascript"> 
    var mouseX = 0; 
    var mouseY = 0; 
    var counter = 0; 
var mouseIsIn = true; 
function wireEvent() { 
window.addEventListener("mouseout", 
    function(e){ 
     mouseX = e.pageX; 
     mouseY = e.pageY; 
     if ((mouseY >= 0 && mouseY <= window.innerHeight) 
     && (mouseX >= 0 && mouseX <= window.innerWidth)) 
      return; 
     //do something for mouse out 
     counter++; 
     mouseIsIn = false; 
     document.getElementById('in_out').innerHTML='out' + counter; 
    }, 
    false); 
window.addEventListener("mouseover", 
    function(e){ 
     if(mouseIsIn) 
      return; 
     //do something for mouse over 
     counter++; 
     mouseIsIn = true; 
     document.getElementById('in_out').innerHTML='in' + counter; 
    }, 
    false); 
} 
</script> 
</head> 
<body onload="wireEvent();"> 
<div id="in_out">&nbsp;</div> 
<div style="width:300px; height: 200px; background: red;">Dummy element</div> 
</body> 
</html>

अद्यतन: mouseout पर माउस स्थिति को ट्रिगर करने
जोड़ा जांच जब आगे बढ़ शरीर के भीतर तत्वों में/बाहर। यदि यह विंडो के भीतर है, तो mouseout ईवेंट ट्रिगर नहीं किया गया है।
mouseIsIn का उपयोग कर माउस 'इन' या 'आउट' की वर्तमान स्थिति के लिए ध्वज भी पेश किया। यदि यह true है, mouseover भी ट्रिगर नहीं करेगा।

स्रोत

2009-11-04 07:29:37

यह काम पर प्रतीत होता है, लेकिन वास्तव में नहीं करता है। दोनों हैंडलर हर बार लाल बॉक्स ("डमी तत्व" पर माउस चलाते हैं।) यह सिर्फ माउसआउट (होता है?) को आखिरी कहा जाता है, इसलिए आप ध्यान नहीं देते हैं। आप इसे हैंडलर की कुल संख्या का काउंटर रखने और इसे 'इन' या 'आउट' के अतिरिक्त प्रिंट करके देख सकते हैं। या console.log() का उपयोग करके। – Geoff

@ गीफ: मैं देखता हूं, इंगित करने के लिए धन्यवाद। मुझे जांचने दो कि मैं और क्या कर सकता हूं ... –

@ गीफ: मैंने 'माउसआउट' पर माउस की स्थिति के लिए अतिरिक्त तर्क लागू किया है। अगर यह खिड़की के भीतर है, तो अनदेखा करें। यह अवांछित ट्रिगरिंग को रोक देगा। मैंने सफारी पर इसका परीक्षण किया है, काम करता है। –

शायद आप माउसओवर के लिए एक श्रोता सेट और document, body या कुछ अन्य तत्व है जो पूरे दस्तावेज लपेटता mouseout सकते हैं, और का उपयोग करें कि एक ट्रिगर के रूप में (बचत है कि यह था, उसके आधार) निर्धारित करने के लिए कि क्या यह खिड़की पर एक वैध mouseout है ?

यह विफल होने पर, आपका पहला विचार (स्थिति जांच के संबंध में) बहुत अच्छा काम करना चाहिए। घटना के दौरान एक्स/वाई के साथ कोई भी घटना गुजरती है। यदि यह खिड़की की ऊंचाई/चौड़ाई से कहीं अधिक है, तो आपने वास्तविक विंडो छोड़ी है।यदि यह कुछ भी नकारात्मक है, तो आपने खिड़की छोड़ी है। और, संभवतः, यदि यह बिल्कुल ऊंचाई/चौड़ाई या बिल्कुल शीर्ष है: 0 या बाएं: 0, तो आपने विंडो छोड़ी।

स्रोत

2009-11-04 07:46:00

आपकी समस्या के लिए विंडो के अंदर माउसआउट घटनाओं से उत्पन्न होने वाली माउसआउट घटनाओं से आती है, जो W3C events spec में वर्णित अनुसार बबल करें। आप देख सकते हैं जो तत्व घटना वास्तव में पर निकाल दिया गया था:

function mouseoutFunction(event) { 
    event = event || window.event; 
    var sender = event.srcElement || event.target; 
}

स्रोत

2009-11-04 07:48:35 Gareth

वह कोड ईवेंट के प्रेषक को मिलेगा, लेकिन यह निर्धारित करने के लिए कि माउस ने विंडो छोड़ी है या नहीं, मैं उस जानकारी का उपयोग कैसे कर सकता हूं? यहां तक कि जब माउस खिड़की छोड़ देता है, प्रेषक खिड़की या दस्तावेज नहीं है - यह सबसे निचला तत्व है, कुछ यादृच्छिक < पी > या <div> इस पर निर्भर करता है कि माउस विंडो से पहले कहां था। – Geoff

यहां मेरा समाधान टाइमर पर आधारित है। यहां टाइमर मूल रूप से अन्य घटना हैंडलर (विशेष रूप से, ऑनसाउसओवर) के लिए निर्णय लेने से पहले निष्पादित करने का मौका देने के लिए उपयोग किया जाता है कि मस्तिष्क खिड़की से बाहर है। 1ms का समय (वास्तव में लगभग 33ms, न्यूनतम टाइमर रिज़ॉल्यूशन होता है) माउसओवर होने के लिए थोड़ा समय देता है यदि यह पहले से नहीं है।

var inWin=0; 
window.onmouseout = function(e) 
{ 
    inWin--; 
    setTimeout(checkIfOut, 1); 
} 
window.onmouseover = function(e) 
{ 
    inWin++; 
} 

function checkIfOut() 
{ 
    if(!inWin) 
    { 
    //Yay! Mouse is out of the window (probably) 
    } 
}

स्रोत

2009-11-04 09:48:45 Raze

माउस खिड़की सहित किसी भी तत्व छोड़ता है, तो, खिड़की वस्तु एक mouseout ईवेंट को सक्रिय और उसके साथ event वस्तु पारित करेंगे।

ईवेंट ऑब्जेक्ट में से किसी एक आइटम को toElement कहा जाता है, जो माउस को उस तत्व के लिए सूचक होता है जब माउस को पुराना छोड़ दिया जाता है।लेकिन जब माउस खिड़की छोड़ देता है, तो ऐसा कोई toElement नहीं है, इसलिए यह आइटम null बन जाता है।

यह जांच करके कि यह आइटम null पर mouseout ईवेंट पर है, तो आप बता सकते हैं कि माउस ने विंडो छोड़ी है या नहीं। यहां कोड है:

window.onmouseout=function(event){ 
    if(event.toElement===null) console.log('the mouse left the window'); 
}

स्रोत

2014-05-10 02:27:39 jaya

जावास्क्रिप्ट घटना जब माउस ब्राउज़र विंडो छोड़ देता है

उत्तर

संबंधित मुद्दे