घटना क्लिक करें एक बटन के भीतर नेस्ट

यहाँ समस्या का एक सरल उदाहरण है:घटना क्लिक करें एक बटन के भीतर नेस्ट

<body> 
    <button id="parent" onclick="alert('parent')"> 
     <span id="child" onclick="alert('child')">Authenticate</span> 
    </button> 
</body>

क्रोम में यह अलर्ट "बच्चा" तो "जनक", लेकिन आईई/एफएफ में हम केवल प्राप्त "पिता" ।

स्पष्ट रूप से इसे कई तरीकों से तय किया जा सकता है (div को बदलें बटन, स्पैन इत्यादि को हटाएं), लेकिन मैं यह जानना चाहता था कि क्या यह काम करने के लिए कोई तरीका था (यानी चेतावनी "बच्चा") एचटीएमएल

धन्यवाद!

पीएस: JQuery का प्रयास किया और यह वही व्यवहार है।

स्रोत

2012-06-17 Noel Abrahams

एक ब्राउज़र में घटना शीर्ष पर बुलबुले की तरह लगता है, दूसरे में नहीं। या ऐसा कुछ ... मैं 'इवेंट बबलिंग' में एक विशेषज्ञ नहीं हूं, लेकिन यह खोज शब्द है जो मुझे लगता है कि परिणाम मिलेगा! –

@ जोनाथन निकोल, यह घटना बुलबुला नहीं है, यह घटना सुरंग है। –

@muistooshort के रूप में, अन्य क्लिक घटनाओं के अंदर क्लिक घटनाओं को संभालने से अप्राकृतिक लगता है। मुझे यह भी लगता है कि आपको अपने डिजाइन पर पुनर्विचार करना होगा।

कहा जा रहा है, तो आप अपने मुख्य कंटेनर पर एक क्लिक घटना संभाल कर सकते हैं और उसके बाद जाँच जो तत्व क्लिक के स्रोत

यह जाने का रास्ता हो सकता है, आपके उपयोग के मामले पर विचार, imo था:

$('your-button-container').click(function(event){ 
    console.log(event.originalEvent.srcElement); 
});

event.originalEvent.srcElement पर आवश्यक चेक करें और तदनुसार कार्य करें।

संपादित करें: JQuery का उपयोग नहीं है, यह इस तरह जाना होगा:

yourButtonContainer.addEventListener(function(event){ 
    console.log(event.srcElement); 
});

स्रोत

2014-10-02 15:14:25

कुछ उपयोगकर्ताओं द्वारा उल्लेख किया है, यह ऐसा घोंसला बटन करना एक अच्छी आदत नहीं है, लेकिन शैक्षिक उद्देश्यों के लिए, मैं

एचटीएमएल:

<body> 
    <button id="parent" onclick="callFn(event, 'parent')"> 
    <span id="child" onclick="callFn(event, 'child')">Authenticate</span> 
    </button> 
</body>

जे एस: 'यह इस तरह से करना d

window.callFn = function(evt, type) { 
    if (type === 'child') { 
    alert(type); 
    } 
}

जे एस फिडल: https://jsfiddle.net/4vo3arpf/4/

स्रोत

2016-10-19 21:08:48 satJ

घटना क्लिक करें एक बटन के भीतर नेस्ट

उत्तर

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