पूरी तरह से तैनात तत्व के माध्यम से माउस घटनाओं को पास करें

Question

मैं इसके शीर्ष पर एक अन्य बिल्कुल तैनात तत्व के साथ एक तत्व पर माउस घटनाओं को पकड़ने का प्रयास कर रहा हूं।

अभी, बिल्कुल मौजूद तत्व की घटनाओं ने इसे मारा और इसके माता-पिता को बुलबुला बना दिया, लेकिन मैं चाहता हूं कि यह इन माउस घटनाओं के लिए "पारदर्शी" हो और इसके पीछे जो कुछ भी है, उस पर उन्हें अग्रेषित करें। मुझे इसे कैसे लागू करना चाहिए?

Answer 1

pointer-events: none;

एक सीएसएस संपत्ति है जो घटनाओं को "उस तत्व से गुजरती है" जिसके लिए इसे लागू किया जाता है और घटना को "नीचे" तत्व पर बनाता है।

विवरण के लिए देखें: https://developer.mozilla.org/en/css/pointer-events

यह IE 11 तक समर्थित नहीं है; अन्य सभी विक्रेता काफी समय से इसका समर्थन करते हैं (वैश्विक समर्थन 12 / '16 में ~ 92% था): http://caniuse.com/#feat=pointer-events (टिप्पणियों में लिंक प्रदान करने के लिए @ s4y के लिए धन्यवाद) ।

Comments

धन्यवाद! यह आधुनिक (और गैर-IE) ब्राउज़रों के लिए एक सही समाधान है। जिस समय यह प्रश्न पोस्ट किया गया था, मुझे नहीं लगता कि pointer-eventsअस्तित्व में है! मैं किसी भी बिंदु पर इस पर स्वीकृत उत्तर को स्विच कर सकता हूं।

— s4y

वाह, यह सिर्फ मुझे घंटे बचाया।

— दान अब्रामोव

मैंने अभी इसका उत्तर स्वीकार कर लिया है। pointer-events अभी भी समर्थन के लिए सुपर भयानक नहीं है , लेकिन यह बेहतर हो रहा है। अधिक संगत विकल्प के लिए, @ JedSchmidt के उत्तर के साथ जाएं।

— s4y

धन्यवाद, मुझे कभी नहीं पता था कि यह वास्तव में मौजूद है। इसने मुझे घंटों बचाया

— मोहम्मद ए। अल जामा

लेकिन क्या होगा अगर आप सिर्फ किसी घटना को स्क्रॉल करने देना चाहते हैं जैसे कि स्क्रॉल इवेंट से गुजरना लेकिन शीर्ष तत्व के लिए अभी भी अन्य सभी घटनाओं पर प्रतिक्रिया देना। शीर्ष-तत्व पर सभी घटनाओं को मारने के लिए पॉइंटर-ईवेंट्स को सेट करना।

— AndroidDev

Answer 2

यदि आप सभी की जरूरत है mousedown है, तो आप इस document.elementFromPointविधि के साथ कर सकते हैं :

1. मूसडाउन पर शीर्ष परत को हटाने,
2. गुजर रहा है xऔर तत्व से नीचे पाने के लिए yघटना से document.elementFromPointविधि तक समन्वय करता है, और फिर
3. शीर्ष परत को पुनर्स्थापित करना।

Comments

यहाँ और अधिक स्पष्ट व्याख्या: विनाइलफॉक्स

— नाथन

बहुत बढ़िया, मुझे नहीं पता था कि यह विधि भी अस्तित्व में थी! यह सबसे आसानी से उपयोग किया जा सकता है सबसे ऊपरी तत्व प्राप्त करने के लिए थोड़ी देर के लूप का उपयोग करके कर्सर के तहत सभी तत्वों को प्राप्त करें और फिर अगले को खोजने के लिए इसे छिपाएं। यहाँ मेरे संस्करण को पकड़ो: gist.github.com/Pichan/5498404

— jpeltoniemi

इस समाधान के साथ समस्या यह है कि यह पृष्ठ को ज़ूम करने के साथ काम नहीं करता है। XY में ज़ूम किए गए मोबाइल उपकरणों या डेस्कटॉप ब्राउज़रों के लिए अब कोई मतलब नहीं है, और ज़ूम की गणना करने का कोई स्पष्ट तरीका नहीं है। मुझे लगता है कि यह वास्तव में असंभव है ज़ूमिंग चुटकी के लिए विश्वास करते हैं।

— Impossibear

Answer 3

यह जानकर भी अच्छा लगा ...
पॉइंटर-घटनाओं को एक मूल तत्व (शायद पारदर्शी div) के लिए अक्षम किया जा सकता है और फिर भी बाल तत्वों के लिए सक्षम किया जा सकता है। यदि आप कई ओवरलैपिंग डिव लेयर के साथ काम करते हैं तो यह मददगार है, जहाँ आप किसी भी लेयर के चाइल्ड एलिमेंट्स पर क्लिक करना चाहते हैं। इसके लिए सभी पेरेंटिंग डिविज़न मिलते हैं pointer-events: noneऔर क्लिक-चिल्ड्रन द्वारा पॉइंटर-ईवेंट प्राप्त किए जाते हैंpointer-events: all

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:all;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

Comments

बहुत बढ़िया, खोज pointer-events:noneकी उच्चता के बाद और बच्चों के नोड्स के आसन्न लेट-डाउन के बाद, आप दिन बचाते हैं :)

— जुआन कोर्टेस

;) इस बारे में बहुत खुशी है

— एलिसन जूल

क्या यह सिर्फ .parent * { pointer-events:all; }बच्चों के लिए उबला हुआ हो सकता है: बच्चों के लिए?

— दिमित्री

यह "पॉइंटर-ईवेंट: ऑटो" होना चाहिए। "सभी" मूल्य केवल एसवीजी पर लागू होता है। देखें developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

— mattavatar

Answer 4

आप इस घटना को प्राप्त नहीं कर रहे हैं इसका कारण यह है कि बिल्कुल तैनात तत्व उस तत्व का कोई बच्चा नहीं है जिसे आप "क्लिक" (ब्लू डिव) करना चाहते हैं। मैं जिस साफ-सुथरे तरीके के बारे में सोच सकता हूं वह यह है कि जिस तत्व को आप क्लिक करना चाहते हैं उसके बच्चे के रूप में निरपेक्ष तत्व डाल दें, लेकिन मैं यह मान रहा हूं कि आप ऐसा नहीं कर सकते या आपने इस सवाल को यहां पोस्ट नहीं किया होगा :)

एक अन्य विकल्प निरपेक्ष तत्व के लिए एक क्लिक इवेंट हैंडलर को पंजीकृत करना और ब्लू डिवा के लिए क्लिक हैंडलर को कॉल करना होगा, जिससे वे दोनों फ्लैश हो जाएंगे।

जिस तरह से ईवेंट डोम के माध्यम से बुलबुले के कारण मुझे यकीन नहीं है कि आपके लिए एक सरल उत्तर है, लेकिन मैं बहुत उत्सुक हूं अगर किसी और के पास कोई चाल है जिसके बारे में मुझे पता नहीं है!

Comments

प्रतिक्रिया के लिए धन्यवाद, लोकतर। दुर्भाग्य से, वास्तविक पृष्ठ पर मुझे पता नहीं चल रहा है कि पूरी तरह से तैनात तत्व के नीचे क्या है, और एक से अधिक संभव लक्ष्य हो सकते हैं। एक ही समाधान मैं सोच सकता हूं कि माउस निर्देशांक को पकड़ रहा है और संभावित लक्ष्य के खिलाफ उनकी तुलना करके यह देखने के लिए कि क्या वे अंतरंग हैं। यह सिर्फ सादा बुरा होगा।

— s4y

Answer 5

एक जावास्क्रिप्ट संस्करण उपलब्ध है जो मैन्युअल रूप से घटनाओं को एक div से दूसरे में पुनर्निर्देशित करता है।

मैंने इसे साफ किया और इसे jQuery प्लगइन में बनाया।

यहाँ Github भंडार है: https://github.com/BaronVonSmeaton/jquery.forward.coments

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

Answer 6

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