पता लगाएं कि माउस जावास्क्रिप्ट

Question

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

क्या यह पता लगाने का कोई तरीका है कि माउस माउस के तत्व के बाहर होने के बिना उड़ने पर तत्व पर है या फिर जेएस माउसओवर ईवेंट को ट्रिगर करने के लिए तत्व पर आ गया है? जैसा कि एक दस्तावेज़ है .getElementById ("blah")। जावास्क्रिप्ट में माउस IsOver() प्रकार का फ़ंक्शन?

Answer 1

मुझे विश्वास है कि उपयोगकर्ता से किसी भी कार्रवाई के बिना यह संभव है। जब आपका पृष्ठ लोड होता है, तो mouseover ईवेंट को अपनी छवि में बाध्य करें और अपनी छवि को छिपाएं (यानी सीएसएस display:none का उपयोग करके)। कुछ मिलीसेकंड में इसे फिर से दिखाने के लिए setTimeout() का उपयोग करें (10 पर्याप्त होना चाहिए)। यहां तक ​​कि निकाल दिया जाना चाहिए।

यदि आप अपनी छवि पर 'फ़्लिक' प्रभाव नहीं लेना चाहते हैं, तो आप इसके बजाय कुछ अस्थायी तत्व का उपयोग करने, ईवेंट को अटैच करने और ईवेंट को अपनी छवि पर प्रस्तुत करने का प्रयास कर सकते हैं।

मुझे नहीं पता कि यह क्रॉस-ब्राउज़र समाधान है, लेकिन यह मेरे फ़ायरफ़ॉक्स 3.0 कंसोल से काम करता है;)

Answer 2

माउस घटनाओं को सुनने के लिए माउस निर्देशांक को अलग करने का कोई तरीका नहीं है, अर्थात् mousemove, mouseover इत्यादि। हालांकि, ये घटनाएं इस भावना में बहुत संवेदनशील हैं कि कर्सर को केवल एक पिक्सेल से ले जाना उन्हें ट्रिगर करने के लिए पर्याप्त है, इसलिए कर्सर को आपकी छवि पर होवर करना है जबकि पूरी तरह से अभी भी कुछ असामान्य होना चाहिए।

Answer 3

आप mousemove घटना का उपयोग कर सकते हैं। जब भी उपयोगकर्ता माउस चलाता है तो वह ट्रिगर होगा; इसलिए ट्रिगर का एकमात्र उदाहरण फायरिंग नहीं होगा यदि उपयोगकर्ता माउस को बिल्कुल भी नहीं ले जाता है, जो दुर्लभ होना चाहिए।

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

यह आदर्श से कम है, लेकिन मुझे लगता है कि यह शायद आपकी समस्या परिदृश्य को पूरा करेगा। निम्नलिखित समाधान छद्म कोड है जो कि समाधान जैसा दिख सकता है, मुझे लगता है कि इसे काम करना चाहिए।

<img src="blah.png" onmousemove="JavaScript:triggerOn(event)" onmouseout="JavaScript:triggerOff(event)"/> 


... 

<script type='text/javascript'> 

var TriggerActive = false; 

function triggerOn(e){ 
    e = e||window.e; 
    if(!TriggerActive){ 
    TriggerActive = true; 
    // Do something 
    } else { 
    // Trigger already fired, ignore this event. 
    } 
} 

function triggerOff(e){ 
    e = e||window.e; 
    if(TriggerActive) 
    TriggerActive = false; 
} 

</script> 

आप कुछ महान ब्राउज़र संगतता सहित माउस घटना की जानकारी नोट here पा सकते हैं।