निम्नलिखित को धयान मे रखते हुए:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>मैं इसे कैसे बना सकता हूं ताकि जब उपयोगकर्ता स्पेंड पर क्लिक करे, तो यह div's' ईवेंट पर क्लिक न करे ।
जवाबों:
Event.stopPropagation () का उपयोग करें ।
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>IE के लिए: window.event.cancelBubble = true
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>eventIOS सफारी में इनलाइन घटनाओं के रूप में अच्छी तरह से उपलब्ध होने लगता है।
फ़ंक्शन के अंदर से इवेंट ऑब्जेक्ट को प्राप्त करने के दो तरीके हैं:
यदि आपको विरासत ब्राउज़रों का समर्थन करने की आवश्यकता है जो W3C सिफारिशों का पालन नहीं करते हैं, तो आमतौर पर किसी फ़ंक्शन के अंदर आप निम्नलिखित जैसे कुछ का उपयोग करेंगे:
function(e) {
var event = e || window.event;
[...];
}जो पहले एक की जांच करेगा, और फिर दूसरे और स्टोर को जो भी घटना चर के अंदर पाया गया था। हालांकि एक इनलाइन घटना हैंडलर में eउपयोग करने के लिए कोई वस्तु नहीं है । उस स्थिति में आपको उस argumentsसंग्रह का लाभ उठाना होगा जो हमेशा उपलब्ध होता है और एक समारोह में दिए गए तर्कों के पूर्ण सेट को संदर्भित करता है:
onclick="var event = arguments[0] || window.event; [...]"हालांकि, आम तौर पर बोलना आपको इनलाइन इवेंट हैंडलर से बचना चाहिए, अगर आपको प्रचार को रोकने जैसी किसी भी चीज़ की ज़रूरत है। अपने ईवेंट हैंडलर्स को अलग से लिखना और उन्हें तत्वों के साथ जोड़ना मध्यम और दीर्घकालिक दोनों में पठनीयता और स्थिरता के लिए बेहतर विचार है।
onclick="foo(event)"तब फ़ंक्शन में function foo(event){/* do stuff with event */}। यह IE और W3C ईवेंट मॉडल दोनों में काम करता है।
ध्यान रखें कि Window.event FireFox में समर्थित नहीं है, और इसलिए इसकी तर्ज पर कुछ होना चाहिए:
e.cancelBubble = trueया, आप फायरफोक्स के लिए W3C मानक का उपयोग कर सकते हैं:
e.stopPropagation();यदि आप फैंसी प्राप्त करना चाहते हैं, तो आप यह कर सकते हैं:
function myEventHandler(e)
{
if (!e)
e = window.event;
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
}<div onclick="myEventHandler(event);">
e.cancelBubbleIE में झूठे रिटर्न! यह e.cancelBubble = true;निर्देश तक नहीं पहुँच सकता । इसके बजाय SoftwareARM की स्थिति का उपयोग करें !!
इस फ़ंक्शन का उपयोग करें, यह सही विधि के अस्तित्व के लिए परीक्षण करेगा।
function disabledEventPropagation(event)
{
if (event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble=true;
}
}मेरे पास एक ही मुद्दा था - IE में त्रुटि बॉक्स js - यह सभी ब्राउज़रों में ठीक काम करता है जहां तक मैं देख सकता हूं (Event.cancelBubble = true IE में काम करता है)
onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"इसने मेरे लिए काम किया
<script>
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>
<div onclick="alert('Click!')">
<div onclick="cancelBubble(event)">Something inside the other div</div>
</div>ASP.NET वेब पेज (MVC नहीं) के लिए, आप Sys.UI.DomEventऑब्जेक्ट को मूल ईवेंट के आवरण के रूप में उपयोग कर सकते हैं ।
<div onclick="event.stopPropagation();" ...या, आंतरिक फ़ंक्शन के पैरामीटर के रूप में ईवेंट पास करें:
<div onclick="someFunction(event);" ...और कुछ में:
function someFunction(event){
event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
// other onclick logic
}इस पृष्ठ के अनुसार , IE में आपको आवश्यकता है:
event.cancelBubble = सच
मैं कर्म के कारण टिप्पणी नहीं कर सकता इसलिए मैं इसे पूरे उत्तर के रूप में लिखता हूं: गैरेथ के उत्तर के अनुसार (var ई = तर्क [0]: window.event; [...]) मैंने इस oneliner इनलाइन onclick के लिए onclick पर उपयोग किया था? तेजी से हैक:
<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>मुझे पता है कि देर हो चुकी है लेकिन मैं आपको बताना चाहता हूं कि यह एक पंक्ति में काम करता है। ब्रेसिज़ एक ऐसी घटना लौटाता है जिसमें दोनों मामलों में स्टॉपप्रॉपैगनेशन-फंक्शन जुड़ा हुआ है, इसलिए मैंने उन्हें ब्रेसिज़ में एन्कैप करने की कोशिश की जैसे कि एक और .... यह काम करता है। :)
यह भी काम करता है - लिंक में HTML इस तरह से रिटर्न के साथ ऑनक्लिक का उपयोग करता है:
<a href="mypage.html" onclick="return confirmClick();">Delete</a>और फिर comfirmClick () फ़ंक्शन की तरह होना चाहिए:
function confirmClick() {
if(confirm("Do you really want to delete this task?")) {
return true;
} else {
return false;
}
};confirmप्रासंगिक नहीं है। मैं रिटर्न वैल्यू की बात कर रहा हूं । उद्धरण: लिंक में HTML इस तरह से रिटर्न के साथ
सिर्फ यह क्यों नहीं जांचा गया कि किस तत्व पर क्लिक किया गया? यदि आप किसी चीज़ पर क्लिक करते हैं, window.event.targetतो उस तत्व को असाइन किया जाता है जिसे क्लिक किया गया था, और क्लिक किए गए तत्व को एक तर्क के रूप में भी पारित किया जा सकता है।
यदि लक्ष्य और तत्व समान नहीं हैं, तो यह एक ऐसी घटना थी जो प्रचारित हुई।
function myfunc(el){
if (window.event.target === el){
// perform action
}
}
<div onclick="myfunc(this)" /><div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header'); event.stopPropagation()">
something inside the header
</span>
</div>सबसे अच्छा समाधान एक जावास्क्रिप्ट फ़ंक्शन के माध्यम से घटना से निपटने के लिए होगा, लेकिन सीधे HTML तत्व का उपयोग करके एक सरल और त्वरित समाधान का उपयोग करने के लिए, और एक बार कि "घटना" और "window.event" पदावनत न हों और सार्वभौमिक रूप से समर्थित न हों। https://developer.mozilla.org/en-US/docs/Web/API/Window/event ), मैं निम्नलिखित "हार्ड कोड" का सुझाव देता हूं:
<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>