मेरे पास एक ऐप है जिसमें कुछ होता है जब आप पृष्ठभूमि पर क्लिक करते हैं, हालांकि, मैं नहीं चाहता कि यह सक्रिय हो जाए यदि आप पृष्ठभूमि के शीर्ष पर किसी अन्य चीज़ पर क्लिक करते हैं। उदाहरण के लिए:

function handleClick() {
  alert("Hello!");
}
.container {
  position: absolute;
  height: 100%;
  width: 100%;
  background: red;
}

.button {
  position: absolute;
  height: 20%;
  width: 20%;
  background: green;
}
<div class="container" onClick="handleClick()">
  <div class="button"></div>
</div>

इस उदाहरण में, जब उपयोगकर्ता हरे बॉक्स पर क्लिक करता है तो मैं अलर्ट को प्रदर्शित होने से कैसे रोक सकता हूं?

4
JakAttk123 3 अप्रैल 2018, 21:40

3 जवाब

सबसे बढ़िया उत्तर

ईवेंट को फ़ंक्शन में पास करें, और जांचें कि क्या इसका लक्ष्य तत्व के समान ही है। जब आप किसी आंतरिक तत्व पर क्लिक करते हैं, तो लक्ष्य वह तत्व होगा। घटना को कंटेनर में जाने से रोकने के लिए event.stopPropagation() का उपयोग करें।

function handleClick(event, element) {
  if (event.target != element) {
    event.stopPropagation();
    return;
  }
  alert("Hello!");
}
.container {
  position: absolute;
  height: 100%;
  width: 100%;
  background: red;
}

.button {
  position: absolute;
  height: 20%;
  width: 20%;
  background: green;
}
<div class="container" onClick="handleClick(event, this)">
  <div class="button"></div>
</div>
2
Barmar 3 अप्रैल 2018, 18:45

आपने डिव पर handleClick फ़ंक्शन जोड़ा है जो (class="container") ने स्क्रीन को कवर किया है। जब आप कहीं भी क्लिक करेंगे तो हैंडलक्लिक चलेगा। तो उस फ़ंक्शन को उस div में जोड़ें जिसमें class= "button" . है

<div class="container">
  <div class="button" onClick="handleClick()">
</div>
0
Darjan Bogdan 3 अप्रैल 2018, 19:33

आप e.target की तुलना e.currentTarget से इस प्रकार कर सकते हैं:

function handleClick(e) {
  if (e.target == e.currentTarget) {
    alert("Hello!");
  }
}
.container {
  position: absolute;
  height: 100%;
  width: 100%;
  background: red;
}

.button {
  position: absolute;
  height: 20%;
  width: 20%;
  background: green;
}
<div class="container" onClick="handleClick(event)">
  <div class="button"></div>
</div>
1
Get Off My Lawn 3 अप्रैल 2018, 18:45