एक विकलांग तत्व

Question

के लिए बंद करो घटना उत्साह से भरा हुआ मैं एक बटन एक शैली

pointer-events: none; 

है कि है और यह बटन एक माता पिता के तत्व है कि एक सिमटने घटना प्रदर्शन करती है। मुझे नहीं पता कि इस बटन को अपने मूल तत्वों को ढहने योग्य घटना को ट्रिगर करने से कैसे रोकें। कोई भी

धन्यवाद

Answer 1

निम्नलिखित एचटीएमएल मान लिया जाये:

<div class="collapsible"> 
    <button>Hi</button> 
</div> 

आप कुछ इस तरह कर सकता है:

$('.collapsible').click(function(e) { 
    if ($(this).children('button').css('pointer-events') == 'none') return; 

    //do collapse 
}); 

इसका कारण यह है बटन शैली जो सूचक-घटनाओं है की वजह से है या शायद यह:

$('.collapsible').click(function(e) {   
    //do collapse 
}); 

$('.collapsible button').click(function(e) { 
    if ($(this).css('pointer-events') == 'none') 
     e.stopPropagation(); 
}); 

Answer 2

जैसा कि @ एडेनेओ ने कहा, यदि आप बच्चे पर pointer-events: none का उपयोग करते हैं, तो माता-पिता का ईवेंट श्रोता यह नहीं जान सकता कि लक्ष्य स्वयं या उसके बच्चे हैं या नहीं। ऐसा लगता है जब आप अनुच्छेद के अंदर कुछ पाठ क्लिक करते हैं, तो ईवेंट श्रोता यह नहीं जान सकता कि आपने टेक्स्ट या पैराग्राफ के पैडिंग पर क्लिक किया है या नहीं।

उसके बाद, आप

document.getElementById('outer').onclick = function(e) { 
    /* your code */ 
}; 
document.getElementById('outer').addEventListener('click', function(e) { 
    if(e.target !== this) { 
     e.stopPropagation(); 
    } 
}, true); 

उपयोग कर सकते हैं pointer-events: none बिना।

इस तरह, आप कैप्चर चरण का उपयोग करते हैं, ताकि आप बच्चों के ईवेंट हैंडलर (जैसे pointer-events: none) के निष्पादन को रोक सकें, लेकिन अब आप अंतर कर सकते हैं कि उपयोगकर्ता ने आपके तत्व या उसके बच्चों पर क्लिक किया है या नहीं।

Demo jsFiddle

समस्या: आप IE के पुराने संस्करणों पर कब्जा चरण का उपयोग नहीं कर सकते हैं।

लाभ: चूंकि यह पुराने IE पर काम नहीं करता है, तो आप

• e = e || window.event
• e.target || e.srcElement
• if (e.stopPropagation) { e.stopPropagation(); } else { e.calcelBubble=true; }