जब एक चाइल्ड एंकर को क्लिक किया जाता है तो मैं माता-पिता की ऑनक्लिक घटना को गोलीबारी से कैसे रोक सकता हूं?

Question

मैं वर्तमान में एक div क्लिक करने योग्य बनाने के लिए jQuery का उपयोग कर रहा हूं और इस div में मेरे पास एंकर भी हैं। मेरे द्वारा चलाए जा रहे समस्या यह है कि जब मैं एक एंकर पर क्लिक करता हूं तो दोनों क्लिक इवेंट फायरिंग होते हैं (डिव और एंकर के लिए)। जब एक लंगर क्लिक किया जाता है तो मैं डिव के ऑनक्लिक इवेंट को गोलीबारी से कैसे रोक सकता हूं?

यहाँ टूट कोड है:

जावास्क्रिप्ट

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

एचटीएमएल

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Answer 1

DOM पर ईवेंट के उच्चतम बिंदु पर बबल, जिस पर एक क्लिक ईवेंट संलग्न किया गया है। आपके उदाहरण में, यहां तक ​​कि अगर आपके पास div में कोई अन्य स्पष्ट रूप से क्लिक करने योग्य तत्व नहीं हैं, तो div का प्रत्येक बच्चा तत्व अपने क्लिक इवेंट को DOM तक बुलबुला कर देगा, जब तक कि DIV का क्लिक इवेंट हैंडलर उसे पकड़ नहीं लेता।

यह देखने के लिए दो समाधान हैं कि वास्तव में इस घटना की उत्पत्ति किसने की है। jQuery घटना के साथ एक वस्तु वस्तु को पास करता है:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

आप अपने लिंक पर एक क्लिक ईवेंट हैंडलर भी संलग्न कर सकते हैं, जो उन्हें अपने हैंडलर के निष्पादन के बाद ईवेंट बबलिंग को रोकने के लिए कहता है :

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

Comments

बहुत बढ़िया जवाब। यह जानकर अच्छा लगा कि विकल्प भी हैं।

— जोनाथन वाटनी

+1! StopPropagation के साथ एक क्लिक हैंडलर संलग्न करना एक बहुत अच्छी चाल है, धन्यवाद!

— थॉमस

यदि आपके पास उन तत्वों का एक समूह था, जिन पर आप प्रसार को रोकना चाहते थे, तो आप उनके मूल तत्व को ढूंढ सकते थे और सिर को वहाँ भी बुदबुदाने से रोक सकते थे। इसलिए एक div में सभी लिंक्स को इंटरसेप्ट करने के बजाय उदाहरण के लिए मान लें - बस div पर क्लिक को भी इंटरसेप्ट करें और इसे किसी भी उच्चतर पर जाने से रोकें और आप सेट करें।

— सुक्राइवल

if( e.target !== this) return;माता-पिता का उपयोग e.stopPropagation()बच्चे की तुलना में बेहतर है क्योंकि आप कभी नहीं जानते हैं कि कोई और बच्चों को कुछ हैंडलर देता है, या अगर किसी पुस्तकालय को एक बच्चे को हैंडलर संलग्न करना चाहिए (और आप लाइब्रेरी कोड के साथ गड़बड़ नहीं करना चाहते हैं)। यह चिंताओं का बेहतर अलगाव है।

— UTF_or_Death

लाना if( e.target !== this) return;माता पिता साधन में जाँच लें कि अगर है कि माता-पिता कि onClick अपने स्वयं के संचालकों की जरूरत नहीं है के अन्य बच्चों के किसी भी क्लिक किए जाते हैं, तो कुछ नहीं होता। तो यह एक ऐसी स्थिति के लिए बेकार है जहां आपके पास उदाहरण के लिए क्लिक करने योग्य माता-पिता div है। e.stopPropagation()हालांकि ठीक काम करता है।

— derf26

Answer 2

StopPropagation विधि का उपयोग करें , एक उदाहरण देखें:

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

जैसा कि jQuery डॉक्स द्वारा कहा गया है:

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

ध्यान रखें कि यह दूसरों के श्रोताओं को इस घटना को संभालने के लिए नहीं रोकता है (उदाहरण के लिए एक बटन के लिए एक से अधिक क्लिक हैंडलर), यदि यह वांछित प्रभाव नहीं है, तो आपको stopImmediatePropagationइसके बजाय उपयोग करना होगा ।

Answer 3

गैर-jQuery कोड (शुद्ध जावास्क्रिप्ट) की तलाश में सभी के लिए यहाँ मेरा समाधान

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

यदि आपके कोड को माता-पिता की चिड़ियों पर क्लिक नहीं किया गया है

Comments

यह मेरे लिए काम करता है, मुझे एक गैर-जेएस / jQuery समाधान की आवश्यकता है। 10x!

— LA

बहुत बढ़िया जवाब। मैंने सीधे घटना को पारित किया। इसलिए मैंने उपयोग नहीं किया window.event, जो MDN हतोत्साहित करता है: developer.mozilla.org/en-US/docs/Web/API/Window/event । यदि आप समय को छोड़ सकते हैं तो मैं इसकी सराहना करूंगा यदि आप टिप्पणी कर सकते हैं कि आपने क्यों इस्तेमाल किया window.event(हो सकता है कि यह एक ऐसा मुद्दा है जो 2015 में अस्तित्व में था या मैं इस कारण को समझने में विफल रहा)।

— 12

Answer 4

आप भी इसे आजमा सकते हैं

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

Answer 5

यदि आप किसी भी मामले में आंतरिक तत्व / एस के साथ बातचीत करने का इरादा नहीं रखते हैं, तो एक सीएसएस समाधान आपके लिए उपयोगी हो सकता है।

बस आंतरिक तत्व को निर्धारित करें pointer-events: none

आपके मामले में:

.clickable > a {
    pointer-events: none;
}

या आम तौर पर सभी आंतरिक तत्वों को लक्षित करने के लिए:

.clickable * {
    pointer-events: none;
}

इस आसान हैक ने मुझे ReactJS के साथ विकसित होने में बहुत समय बचाया

ब्राउज़र समर्थन यहां पाया जा सकता है: http://caniuse.com/#feat=pointer-events

Answer 6

यदि आपके पास क्लिक करने योग्य div में कई तत्व हैं, तो आपको यह करना चाहिए:

$('#clickable *').click(function(e){ e.stopPropagation(); });

Answer 7

उपयोग करना return false;या e.stopPropogation();आगे के कोड को निष्पादित करने की अनुमति नहीं देगा। यह इस बिंदु पर ही प्रवाह को रोक देगा।

Comments

हां, यह महत्वपूर्ण है - खुद में भाग गया। लेकिन रेक्स से ऊपर का उत्तर सहायक है - उस तत्व को प्राप्त कर सकते हैं जिसे क्लिक किया गया था, और कुछ मामलों में इस तर्क का उपयोग करें जिसे आप रोकने की कोशिश कर रहे हैं। .getget.nodeName भी हिट होने का स्पष्ट विचार प्राप्त करने के लिए सहायक था।

— वाटरकैमन

Answer 8

अगर किसी को ज़रूरत हो तो लिखना (मेरे लिए काम करना):

event.stopImmediatePropagation()

से इस समाधान।

Answer 9

इनलाइन वैकल्पिक:

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Answer 10

यहाँ एक उदाहरण है जो कि कोणीय 2+ का उपयोग कर रहा है

उदाहरण के लिए, यदि आप एक मॉडल घटक को बंद करना चाहता था उपयोगकर्ता इसके बाहर क्लिक करता है तो:

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

Answer 11

आपको माता-पिता (डिव) को इस घटना को पहुंचने (बुदबुदाने) से रोकने की आवश्यकता है। बुदबुदाती के बारे में हिस्सा देखें यहाँ , और jQuery विशेष एपीआई जानकारी यहाँ ।

Comments

ठंडा। घटना बुदबुदाती के बारे में जानकारी के लिए धन्यवाद।

— जोनाथन वाटनी

Answer 12

var inner = document.querySelector("#inner");
var outer = document.querySelector("#outer");
inner.addEventListener('click',innerFunction);
outer.addEventListener('click',outerFunction);

function innerFunction(event){
  event.stopPropagation();
  console.log("Inner Functiuon");
}

function outerFunction(event){
  console.log("Outer Functiuon");
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-Event with Outer and Inner Progration</title>
</head>
<body>
<div id="outer" style="width:100px;height:100px;background-color:green;">
  <div id="inner" style="width:35px;height:35px;background-color:yellow;"></div>
</div>
</body>
</html>

Answer 13

कुछ उप तत्व को स्पष्ट करने के लिए जैसा कि नीचे उदाहरण में css पदानुक्रम लिख सकते हैं।

इस उदाहरण में मैं किसी भी तत्व (*) को td के अंदर td के अंदर ट्रे के अंदर "sstable" क्लास के साथ प्रचार करना बंद कर देता हूं।

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

Answer 14

IgnParent () एक शुद्ध जावास्क्रिप्ट समाधान है।

यह एक मध्यस्थ परत के रूप में काम करता है जो माउस तत्व के निर्देशांक की तुलना बाल तत्व / एस के निर्देशांक के साथ करता है। दो सरल कार्यान्वयन चरण:

1. अपने पेज पर ignParent () कोड डालें।

2. माता-पिता के मूल ऑन्किक के बजाय = "parentEvent ();" , लिखो:

onclick="ignoreParent(['parentEvent()', 'child-ID']);"

आप फ़ंक्शन में किसी भी बच्चे के तत्वों की संख्या को आईडी पास कर सकते हैं, और दूसरों को बाहर कर सकते हैं।

यदि आपने बच्चे के तत्वों में से एक पर क्लिक किया है, तो मूल घटना आग नहीं है। यदि आप माता-पिता पर क्लिक करते हैं, लेकिन किसी भी बच्चे के तत्वों पर नहीं [तर्क के रूप में प्रदान किया गया है], तो माता-पिता की घटना को निकाल दिया जाता है।

अनदेखी () गितुब पर कोड

Answer 15

यदि यह इनलाइन संदर्भ में है, तो HTML में यह प्रयास करें:

onclick="functionCall();event.stopPropagation();

Answer 16

यदि किसी के पास प्रतिक्रिया का उपयोग करके यह समस्या थी, तो मैंने इसे हल किया।

एससीएसएस:

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

घटक का रेंडर ():

render() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

चाइल्ड मोडल (कंटेंट डिव) माउस क्लिक ईवेंट के लिए ऑनक्लिक फ़ंक्शन को जोड़कर मूल तत्व के 'क्लोजलाइन' समारोह तक पहुंचने से रोका जाता है।

इसने मेरे लिए चाल चली और मैं 2 सरल divs के साथ एक आदर्श प्रभाव बनाने में सक्षम था।

Answer 17

aइस प्रकार जोड़ें :

<a href="http://foo.com" onclick="return false;">....</a>

या return false;क्लिक हैंडलर से #clickableजैसे:

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

Answer 18

सभी समाधान जटिल और jscript के हैं। यहाँ सबसे सरल संस्करण है:

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

Comments

मुझे लगता है कि आपने लाइन में गलती की है "IsChildWindow == false;" - यह नहीं होना चाहिए "IsChildWindow = false?"

— आंद्रे श्वेघोफर

Answer 19

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>

Comments

यह लिंक को नेविगेट करने से भी रोकता है।

— रेक्स एम।

हाँ, या क्या जरूरत नहीं है ?. या नेवगर होने की जरूरत है?

— andres descalzo