2012-03-21 13 views
5

क्या यह जानने का कोई तरीका है कि क्या माउस ईवेंट तत्व के एक विशिष्ट पक्ष से छोड़ा गया है? मेरा मतलब है, मेरे पास माउसओवर/माउसेंटर ईवेंट वाला एक डीआईवी है और मैं केवल तभी ट्रिगर करना चाहता हूं जब माउस बाईं ओर छोड़ देता है डीआईवी और दाईं ओर, लेकिन यदि यह नीचे या ऊपर से निकलता है, तो उसे किसी भी क्रिया को ट्रिगर नहीं करना चाहिए।jquery पर माउसआउट/छोड़ने की घटनाओं को अलग कैसे करें?

अग्रिम धन्यवाद।

उत्तर

4

jQuery के साथ आप इतनी के रूप में घटना की offsetX संपत्ति इस्तेमाल कर सकते हैं:

$('#element').mouseout(function(e) { 
    if (e.offsetX < 0 || e.offsetX > $(this).width()) { 
     alert('out the side!'); 
    } 
}); 

मुझे नहीं लगता है कि संपत्ति विश्वसनीय क्रॉस-ब्राउज़र (w/jQuery ओ) है और मेरा मानना ​​है कि jQuery यह सामान्य हो (मैंने इसे क्रोम & आईई 7-9 में परीक्षण किया है)। असल में, संपत्ति में शामिल होता है जहां ईवेंट निकाल दिए जाने पर कर्सर लक्ष्य तत्व से संबंधित होता है। यदि मान 0 से कम या तत्व की चौड़ाई से अधिक है, तो आप जानते हैं कि कर्सर तत्व के बाएं किनारे पर तत्व के बाएं या दाएं किनारे के बाहर था।

4

आप event object की pageX और pageY गुण जांच करने और उन्हें सवाल में तत्व के आयामों की तुलना (, offset से जैसे और outerWidth/outerHeight के रूप में उपयुक्त में जोड़ने) कर सकते हैं।

1

आसान तरीके से नहीं, AFAIK, लेकिन यह किया जा सकता है।

माउस पर, आप तत्व स्थिति के साथ माउस स्थिति की तुलना करते हैं।

jQuery के लिए देखें माउस स्थिति ट्यूटोरियल: http://docs.jquery.com/Tutorials:Mouse_Position

(यह ट्यूटोरियल में MouseMove का उपयोग करता है, लेकिन यह भी mouseenter/mouseleave के लिए काम करता है)

1

शायद तुम mouseout jQuery समारोह इस्तेमाल कर सकते हैं (या mouseleave?) और तत्व, ऊंचाई और चौड़ाई के समन्वय प्राप्त करने के लिए जावास्क्रिप्ट के साथ एक कस्टम हैंडलर जोड़ें, और ट्रैक करें कि माउस समन्वय आपकी सीमा से पहले हैं या नहीं।

यानी आपका माउस-आउट घटना आग लगती है, हैंडलर तत्व (x, y) -> (10, 10) पर तत्व का पता लगाता है, ऊंचाई 20 है और चौड़ाई 20 है। यदि माउस-समन्वय अधिक होते हैं एक्स पर 30 से अधिक और वाई पर 10 से 30 के बीच, माउस दाएं हाथ पर छोड़ दिया है।

1

मुझे एहसास है कि यह एक पुराना सवाल है, लेकिन मैं होवर प्रभावों के लिए उपयोग के समान कुछ ढूंढ रहा था। मैंने पाया jquery.hoverdir

काम हो सकता है ...

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