कोणीय 2 स्टॉप सभी बच्चों

Question

की क्लिक करें घटना प्रचार सभी बच्चों तत्वों की क्लिक करें घटना प्रसार को रोकने के लिए कैसे:

<div (click)="openModal()"> 
    <span>Click in this element open the modal</span> 
    <li>Click in this element open the modal too</li> 
    <p>Click in this element open the modal too</p> 
    <input type="button">Click in this element open the modal too</input> 
</div> 

मैं केवल div तत्व के साथ मोडल खोलना चाहते हैं। क्या इसे करने का कोई तरीका है?

Answer 1

आप सशर्त तर्क केवल निष्पादित करने के लिए जब जनक div तत्व क्लिक किया जाता है (और नहीं जब घटना से प्रसारित जब चाइल्ड तत्व पर क्लिक), तो आप अगर घटना के currentTarget property के बराबर है देखने के लिए जाँच कर सकता है चाहते हैं target property।

• currentTarget property हमेशा तत्व यह है कि घटना के लिए बाध्य है को दर्शाता है। इस मामले में, (click) घटना div तत्व से जुड़ा हुआ है।
• event.target property हमेशा उस तत्व को संदर्भित करता है जो घटना को प्रेषित करता है।

इसलिए, यदि आप केवल मामलों में जहां एक बच्चे तत्व क्लिक किया जाता है बाहर फ़िल्टर करना चाहते हैं और आप अनिवार्य रूप से प्रचारित घटनाओं बाहर फ़िल्टर करना चाहते हैं, तो आप अगर $event.currentTarget बराबर है देखने के लिए $event.target के लिए जाँच कर सकते हैं:

public openModal ($event) { 
    if ($event.currentTarget === $event.target) { 
    // Clicked on the parent `div` element with the 
    // click event binding `(click)="openModal($event)"` 
    console.log('Clicked the parent, not the child.'); 
    } 
} 

<div (click)="openModal($event)"> 
    <span>...</span> 
    <p>...</p> 
</div>