मैं सिर्फ आपके साथ कुछ साझा करना चाहता था।
मुझे कुछ कठिन समय ng-mouseenter
और ng-mouseleave
घटनाओं के साथ मिला ।
मामले का अध्ययन:
मैंने एक फ्लोटिंग नेविगेशन मेनू बनाया, जो कर्सर के आइकन पर होने पर टॉगल होता है।
यह मेनू प्रत्येक पृष्ठ के शीर्ष पर था।
- मेनू पर दिखाने / छिपाने के लिए, मैं एक क्लास टॉगल करता हूं।
ng-class="{down: vm.isHover}"
- Vm.isHover टॉगल करने के लिए , मैं एनजी माउस घटनाओं का उपयोग करता हूं।
ng-mouseenter="vm.isHover = true"
ng-mouseleave="vm.isHover = false"
अभी के लिए, सब कुछ ठीक था और उम्मीद के मुताबिक काम किया।
समाधान साफ और सरल है।
आने वाली समस्या:
एक विशिष्ट दृष्टिकोण में, मेरे पास तत्वों की एक सूची है।
जब कर्सर सूची के एक तत्व से अधिक हो तो मैंने एक एक्शन पैनल जोड़ा।
मैंने व्यवहार को संभालने के लिए ऊपर दिए गए समान कोड का उपयोग किया।
समस्या:
मुझे पता चला जब मेरा कर्सर फ्लोटिंग नेविगेशन मेनू पर है और एक तत्व के शीर्ष पर भी, एक दूसरे के बीच संघर्ष है।
एक्शन पैनल दिखाई दिया और फ्लोटिंग नेविगेशन छिपा हुआ था।
बात यह है कि भले ही कर्सर फ्लोटिंग नेविगेशन मेनू पर हो, सूची तत्व एनजी-माउसेंटर चालू हो जाता है।
इससे मुझे कोई मतलब नहीं है, क्योंकि मैं माउस के प्रसार की घटनाओं के स्वत: विराम की उम्मीद करूंगा।
मुझे कहना होगा कि मैं निराश था और मैंने उस समस्या का पता लगाने के लिए कुछ समय बिताया।
पहले विचार:
मैंने इन्हें इस्तेमाल करने की कोशिश की:
$event.stopPropagation()
$event.stopImmediatePropagation()
मैंने बहुत सारे एनजी पॉइंटर इवेंट्स (मूसमोव, म्यूओवर, ...) को जोड़ा, लेकिन किसी ने भी मेरी मदद नहीं की।
सीएसएस समाधान:
मुझे एक सरल सीएसएस संपत्ति के साथ समाधान मिला जिसे मैं अधिक से अधिक उपयोग करता हूं:
pointer-events: none;
मूल रूप से, मैं इसका उपयोग उस तरह करता हूं (मेरी सूची तत्वों पर):
ng-style="{'pointer-events': vm.isHover ? 'none' : ''}"
इस मुश्किल के साथ, एनजी-माउस की घटनाओं को अब ट्रिगर नहीं किया जाएगा और मेरा फ्लोटिंग नेविगेशन मेनू कर्सर के ऊपर और सूची से एक तत्व के ऊपर होने पर अब खुद को बंद नहीं करेगा।
आगे जाने के लिए:
जैसा कि आप उम्मीद कर सकते हैं, यह समाधान काम करता है लेकिन मुझे यह पसंद नहीं है।
हम अपनी घटनाओं को नियंत्रित नहीं करते हैं और यह खराब है।
इसके अलावा, आपके पास vm.isHover
इसे प्राप्त करने के लिए गुंजाइश होनी चाहिए और यह संभव या संभव नहीं हो सकता है लेकिन किसी तरह या किसी अन्य तरीके से गंदा हो सकता है।
अगर कोई दिखना चाहे तो मैं एक फील कर सकता था।
फिर भी, मेरे पास दूसरा उपाय नहीं है ...
यह एक लंबी कहानी है और मैं आपको एक आलू नहीं दे सकता, इसलिए कृपया मुझे मेरे दोस्त को माफ कर दें।
वैसे भी, pointer-events: none
जीवन है, इसलिए इसे याद रखें।