अंतर्निहित तत्वों के लिए div के माध्यम से क्लिक करें

Question

मेरे पास एक divहै background:transparent, साथ में border। इसके नीचे div, मेरे पास अधिक तत्व हैं।

वर्तमान में, जब मैं ओवरले के बाहर क्लिक करता हूं, तो मैं अंतर्निहित तत्वों पर क्लिक कर सकता हूं div। हालाँकि, ओवरले पर सीधे क्लिक करने पर मैं अंतर्निहित तत्वों को क्लिक करने में असमर्थ हूँ div।

मैं इसके माध्यम से क्लिक करना चाहता हूं divताकि मैं अंतर्निहित तत्वों पर क्लिक कर सकूं।

Answer 1

हां, आप ऐसा कर सकते हैं।

pointer-events: noneIE11 के लिए CSS सशर्त वक्तव्यों (IE10 या नीचे काम नहीं करता है) के साथ प्रयोग करके , आप इस समस्या के लिए एक क्रॉस ब्राउज़र संगत समाधान प्राप्त कर सकते हैं।

उपयोग करते हुए AlphaImageLoader, आप .PNG/.GIFओवरले में पारदर्शी एस भी डाल सकते हैं divऔर नीचे के तत्वों के माध्यम से क्लिक प्रवाह कर सकते हैं।

सीएसएस:

pointer-events: none;
background: url('your_transparent.png');

IE11 सशर्त:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

यहाँ सभी कोड के साथ एक बुनियादी उदाहरण पृष्ठ है ।

Comments

क्या होगा अगर मैं उस div पर संक्रमण या होवर-स्टेट्स का उपयोग कर रहा हूँ?

— मटियोर

@ मिनीटॉर लघु उत्तर: आप नहीं कर सकते। इस मामले में प्रदान किया गया उत्तर काम नहीं करता है।

— नील्स एबल्डगार्ड

IE11 पॉइंटर-ईवेंट का पूरी तरह से समर्थन करता है। इसका मतलब है कि सभी आधुनिक ब्राउज़र इसका समर्थन करते हैं। यह देर से 2014 के रूप में एक व्यावहारिक समाधान है। caniuse.com/#search=pointer-events

— जुडाह गेब्रियल हिमंगो

जैसा कि @Andy ने नोट किया है, यह स्क्रॉलिंग को तोड़ता है। मैंने यह देखने के लिए एक अलग मुद्दा खोला कि क्या इस stackoverflow.com/questions/41592349/… का

— ओलिवर जोसेफ ऐश

@ मैटिकोर ने पाया कि आप "पॉइंटर-ईवेंट: को ओवरराइट कर सकते हैं: कोई नहीं;" नेस्टेड तत्व के लिए, इसलिए आप कुछ को बाय बाय लिख सकते हैं, जिस पर क्लिक और ओवर मिलता है, ओवरराइट वाले हिस्सों के लिए आप इफेक्ट्स और क्लिक का उपयोग कर सकते हैं

— Luca C.

Answer 2

यह जानकर भी अच्छा लगा ...
आप एक मूल तत्व (संभवत: पारदर्शी div) में सूचक-घटनाओं को अक्षम कर सकते हैं लेकिन क्या यह अभी भी अपने बाल तत्वों के लिए सक्षम है।
यदि आप एक से अधिक अतिव्यापी div परतों के साथ काम करते हैं तो यह मददगार है, जहाँ आप बाल तत्वों पर क्लिक करना चाहते हैं, जबकि माता-पिता की परतें किसी भी माउस घटनाओं पर प्रतिक्रिया नहीं करती हैं।

इसके लिए सभी पैरेंटिंग डिव मिलते हैं pointer-events: noneऔर इसके क्लिक करने योग्य बच्चों को पॉइंटर-इवेंट मिलते हैंpointer-events: auto

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

<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

बिल्कुल सही, यह वही है जो मुझे चाहिए था!

— RobbyReindeer

सुपर उपयोगी, धन्यवाद

— SpaceBear

Answer 3

divअंतर्निहित तत्व पर क्लिक करने के लिए उपयोगकर्ता को अनुमति देना ब्राउज़र पर निर्भर करता है। फ़ायरफ़ॉक्स, क्रोम, सफारी और ओपेरा सहित सभी आधुनिक ब्राउज़र, समझते हैं pointer-events:none।

IE के लिए, यह पृष्ठभूमि पर निर्भर करता है। यदि पृष्ठभूमि पारदर्शी है, तो क्लिकथ्रू आपके बिना कुछ भी करने की आवश्यकता के बिना काम करता है। दूसरी ओर, जैसे कुछ के लिए background:white; opacity:0; filter:Alpha(opacity=0);, IE को मैन्युअल ईवेंट अग्रेषण की आवश्यकता होती है।

देखें एक JSFiddle परीक्षण और CanIUse सूचक घटनाओं ।

Answer 4

मैं इस जवाब को जोड़ रहा हूं क्योंकि मैंने इसे यहां पूरा नहीं देखा। मैं यह करने में सक्षम था elementFromPoint का उपयोग करते हुए। तो मूल रूप से:

• उस div पर क्लिक करें जिसे आप क्लिक करना चाहते हैं
• इसे छिपाने
• निर्धारित करें कि पॉइंटर किस तत्व पर है
• वहाँ तत्व पर क्लिक करें आग।

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

मेरे मामले में ओवरलेइंग डिव बिल्कुल स्थिति में है - मुझे यकीन नहीं है कि इससे फर्क पड़ता है। यह IE8 / 9, Safari Chrome और Firefox पर कम से कम काम करता है।

Answer 5

1. तत्व को ओवरलेइंग छिपाएं
2. कर्सर निर्देशांक निर्धारित करें
3. उन निर्देशांक पर तत्व प्राप्त करें
4. ट्रिगर तत्व पर क्लिक करें
5. फिर से ओवरलेइंग तत्व दिखाएं

$('#elementontop').click(e => {
    $('#elementontop').hide();
    $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
    $('#elementontop').show();
});

Comments

क्या आप प्रेरितों को बंद करना भूल गए हैं? शायद $('#elementontop)होना चाहिए $('#elementontop')?

— जोहानचोपिन

Answer 6

मुझे यह करने की आवश्यकता थी और इस मार्ग को लेने का फैसला किया:

$('.overlay').click(function(e){
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

Answer 7

मैं वर्तमान में कैनवास भाषण गुब्बारे के साथ काम करता हूं। लेकिन क्योंकि सूचक के साथ गुब्बारा एक डिव में लिपटा हुआ है, इसके अंतर्गत कुछ लिंक अब सक्षम नहीं हैं। मैं इस मामले में extjs का उपयोग नहीं कर सकता। मेरे भाषण के लिए मूल उदाहरण देखें गुब्बारा ट्यूटोरियल को HTML5 की आवश्यकता है

इसलिए मैंने एक सरणी में गुब्बारे के अंदर से सभी लिंक निर्देशांक एकत्र करने का निर्णय लिया।

var clickarray=[];
function getcoo(thatdiv){
         thatdiv.find(".link").each(function(){
                 var offset=$(this).offset();           
                 clickarray.unshift([(offset.left),
                                     (offset.top),
                                     (offset.left+$(this).width()),
                                     (offset.top+$(this).height()),
                                     ($(this).attr('name')),
                                     1]);
                                     });
         }

मैं इस फ़ंक्शन को प्रत्येक (नए) गुब्बारे पर कहता हूं। यह एक लिंक के बाएं / शीर्ष और दाएं / नीचे कोनों के निर्देशांक को पकड़ता है। इसके अलावा - यदि कोई व्यक्ति उस निर्देशांक में क्लिक करता है तो मुझे क्या करना है और इसके लिए मुझे 1 सेट करना पसंद है, जिसका अर्थ है कि यह क्लिक किया गया जेट नहीं था । और इस एरे को क्लिकरेअर में अनफिट कर दें। आप पुश का भी उपयोग कर सकते हैं।

उस सरणी के साथ काम करने के लिए:

$("body").click(function(event){
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray){
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
                }
             }
          if(job.length>0){   
             // --do some thing with the job --
            }
          });

यह फ़ंक्शन किसी बॉडी क्लिक ईवेंट के निर्देशांक को प्रमाणित करता है या यह पहले से ही क्लिक किया गया था और नाम विशेषता लौटाता है। मुझे लगता है कि गहराई तक जाना जरूरी नहीं है, लेकिन आप देखिए कि यह जटिल नहीं है। आशा है कि ऊर्जावान था ...

Answer 8

यह उस तरह से काम नहीं करता है। चारों ओर काम मैन्युअल रूप से प्रत्येक तत्व के कब्जे वाले क्षेत्र के खिलाफ माउस क्लिक के निर्देशांक की जांच करना है।

एक तत्व के कब्जे वाले क्षेत्र को 1. पाया जा सकता है। पृष्ठ के शीर्ष बाएं के संबंध में तत्व का स्थान प्राप्त करना, और 2. चौड़ाई और ऊंचाई। jQuery की तरह एक पुस्तकालय यह बहुत आसान बनाता है, हालांकि यह सादे js में किया जा सकता है। के लिए एक ईवेंट हैंडलर जोड़ने mousemoveपर documentवस्तु ऊपर से माउस की स्थिति के निरंतर अद्यतन प्रदान और पेज के लिए छोड़ दिया जाएगा। यह तय करना कि यदि माउस किसी दिए गए ऑब्जेक्ट पर है, तो यह जांचना शामिल है कि किसी तत्व के बाएं, दाएं, ऊपर और नीचे किनारों के बीच माउस की स्थिति है या नहीं।

Comments

जैसा कि ऊपर उल्लेख किया गया है, आप अपने पारदर्शी कंटेनर पर CSS (पॉइंटर-ईवेंट: कोई नहीं;) का उपयोग करके इसे प्राप्त कर सकते हैं।

— एम्पेरोल 15

Answer 9

नहीं, तुम एक तत्व के माध्यम से 'क्लिक' नहीं कर सकते। आप क्लिक के सह-निर्देश प्राप्त कर सकते हैं और यह जानने की कोशिश कर सकते हैं कि क्लिक किए गए तत्व के नीचे कौन सा तत्व है, लेकिन यह वास्तव में उन ब्राउज़रों के लिए थकाऊ है जिनके पास नहीं है document.elementFromPoint। फिर आपको अभी भी क्लिक करने की डिफ़ॉल्ट क्रिया का अनुकरण करना होगा, जो कि आपके अधीन वहां मौजूद तत्वों के आधार पर आवश्यक नहीं है।

चूंकि आपको पूरी तरह से पारदर्शी खिड़की वाला क्षेत्र मिला है, इसलिए आप शायद इसे बाहर के आस-पास के अलग-अलग सीमा तत्वों के रूप में लागू करने से बेहतर होंगे, केंद्र क्षेत्र को बाधा मुक्त छोड़ दें ताकि आप वास्तव में सीधे क्लिक कर सकें।

Answer 10

प्रयास करने के लिए एक और विचार (स्थितिगत रूप से) निम्नलिखित होगा:

1. एक div में इच्छित सामग्री रखो;
2. उच्च-क्लिक ओवरले को z- इंडेक्स के साथ पूरे पृष्ठ पर रखें,
3. मूल div की एक और क्रॉप्ड कॉपी बनाएं
4. ओवरले और एब्स को कॉपी डिव को उसी स्थान पर रखें जहां मूल सामग्री आप एक उच्चतर z- इंडेक्स के साथ क्लिक करने योग्य होना चाहते हैं?

कोई विचार?

Answer 11

मुझे लगता है कि आप अपने मार्कअप को बदलने पर विचार कर सकते हैं। अगर मैं गलत नहीं हूं, तो आप दस्तावेज़ के ऊपर एक अदृश्य परत डालना चाहेंगे और आपका अदृश्य मार्कअप आपकी दस्तावेज़ छवि से पहले हो सकता है (क्या यह सही है?)।

इसके बजाय, मैं प्रस्ताव करता हूं कि आप दस्तावेज़ की छवि के बाद अदृश्य अधिकार डालें लेकिन स्थिति को निरपेक्ष में बदल दें।

ध्यान दें कि आपको स्थिति के लिए एक मूल तत्व की आवश्यकता है: रिश्तेदार और फिर आप इस विचार का उपयोग करने में सक्षम होंगे। अन्यथा आपकी निरपेक्ष परत सिर्फ ऊपरी बाएं कोने में रखी जाएगी।

एक पूर्ण स्थिति तत्व पहले मूल तत्व के सापेक्ष स्थित होता है जिसमें स्थैतिक के अलावा कोई अन्य स्थिति होती है। यदि ऐसा कोई तत्व नहीं मिला है, तो युक्त ब्लॉक html है

उम्मीद है की यह मदद करेगा। सीएसएस स्थिति के बारे में अधिक जानकारी के लिए यहां देखें ।

Answer 12

aउदाहरण के लिए, सभी HTML अर्क के चारों ओर केवल टैग लपेटें

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

मेरे उदाहरण में मेरे कैप्शन वर्ग में हॉवर प्रभाव है, जो सूचक घटनाओं के साथ: कोई नहीं; तुम बस हार जाओगे

सामग्री को लपेटने से आपके होवर प्रभाव बने रहेंगे और आप सभी चित्र, div शामिल, संबंध में क्लिक कर सकते हैं !

Comments

अच्छी बात! thnks

— Mr.Vertigo

Answer 13

आप एक एपी ओवरले की तरह रख सकते हैं ...

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

बस इसे डाल दिया जहाँ आप नहीं चाहते हैं यानी cliked। सभी में काम करता है।

Answer 14

एक आसान तरीका यह होगा कि पारदर्शी यूआरआई का उपयोग करके पारदर्शी पृष्ठभूमि छवि को इनलाइन किया जाए:

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Answer 15

मुझे लगता event.stopPropagation();है कि यहाँ भी उल्लेख किया जाना चाहिए। इसे अपने बटन के क्लिक फ़ंक्शन में जोड़ें।

डोम ट्री को बुदबुदाने से घटना को रोकता है, किसी भी माता-पिता के हैंडलर को घटना की सूचना देने से रोकता है।

Answer 16

यह प्रश्न का सटीक उत्तर नहीं है, लेकिन इसके लिए वर्कअराउंड खोजने में मदद कर सकता है।

मेरे पास एक छवि थी जो मैं पेज लोड पर छिपा रहा था और प्रदर्शित कर रहा था जब एक AJAX कॉल पर प्रतीक्षा कर रहा था लेकिन फिर से छुपा रहा था ...

पृष्ठ लोड करते समय मुझे अपनी छवि प्रदर्शित करने का एकमात्र तरीका मिल गया, फिर इसे गायब कर दें और उन चीजों पर क्लिक करने में सक्षम हों जहां छवि को छिपाने से पहले स्थित थी, छवि को एक डीआईवी में डाल दिया गया था, डीआईवी 10x10 पिक्सल या छोटे आकार का बना एक समस्या पैदा करने से रोकने के लिए पर्याप्त है जिसमें युक्त div को छिपाया गया है। इसने छवि को दिखाई देने के दौरान div को ओवरफ्लो करने की अनुमति दी और जब div को छिपाया गया, तो केवल divs क्षेत्र ऑब्जेक्ट्स को क्लिक करने में असमर्थता से प्रभावित था और उस छवि का पूरा आकार नहीं जिसमें DIV सम्‍मिलित था और प्रदर्शित हो रहा था।

मैंने सीएसएस डिस्प्ले = कोई नहीं / ब्लॉक, अपारदर्शिता = 0 सहित छवि को छिपाने के लिए सभी तरीकों की कोशिश की, छवि को छिपे हुए = सच्चे के साथ छिपा दिया। उन सभी के परिणामस्वरूप मेरी छवि छिपी हुई थी, लेकिन जिस क्षेत्र में यह प्रदर्शित करने के लिए प्रदर्शित किया गया था, वहां क्लिक के नीचे सामान पर एक आवरण था और इसलिए अंतर्निहित वस्तुओं पर कार्य नहीं करेगा। एक बार जब छवि एक छोटे DIV के अंदर थी और मैंने छोटे DIV को छिपाया था, तो छवि द्वारा कब्जा किया गया पूरा क्षेत्र स्पष्ट था और DIV I के तहत केवल छोटा क्षेत्र प्रभावित हुआ था, लेकिन जैसा कि मैंने इसे काफी छोटा (10x10 पिक्सल) बनाया था, मुद्दा तय किया गया था (की तरह)।

मैंने पाया कि यह एक साधारण मुद्दा होना चाहिए, लेकिन मैं एक कंटेनर के बिना अपने मूल प्रारूप में ऑब्जेक्ट को छिपाने का कोई तरीका नहीं ढूंढ सका। मेरी वस्तु आदि के रूप में था यदि किसी के पास बेहतर तरीका है, तो कृपया मुझे बताएं।