मैंने एक परिवर्तन ईवेंट श्रोता input[type='checkbox'] तत्व जोड़ा है, लेकिन भले ही मैंने अपने JS कोड में e.stopPropagation() शामिल किया हो, यह ईवेंट <li> पर क्लिक श्रोता तक बबल लगता है। तत्व।

मेरी एचटीएमएल संरचना:

<li> 
  <label class="checkboxContainer">
  <input type="checkbox">
  <span class="checkmark"></span>
  </label>
Lorem ipsum
</li>

यह ध्यान रखना महत्वपूर्ण है कि चेकबॉक्स तत्व कोई स्थान नहीं लेता है। इसके बजाय, लेबल तत्व को कस्टम चेकबॉक्स बनाने के लिए अनुकूलित किया गया है। इवेंट लिस्टनर को लेबल में जोड़ने से समान प्रभाव पड़ता है।

मेरा जेएस कोड:

  1. चेकबॉक्स चेंज इवेंट पर इवेंट लिस्टनर
const checkbox = document.querySelector(".checkboxContainer input");
checkbox.addEventListener("change", e => {
      e.stopPropagation();
      //rest of code goes here
}):
  1. इवेंट लिस्टनर ली क्लिक इवेंट . पर
const li = document.querySelector('li');
li.addEventListener("click", e => {
     //code goes here
});

मैं क्या हासिल करना चाहता हूं, इसका अंदाजा लगाने के लिए नीचे दी गई छवि देखें todo जब मैं नीले क्षेत्र पर क्लिक करता हूं, तो टूडू फीका हो जाना चाहिए (चेकबॉक्स घटना)। जब मैं ली के पाठ पर क्लिक करता हूं, तो संपादन स्क्रीन को टॉगल करना चाहिए। (ली क्लिक इवेंट) अब जब मैं नीले क्षेत्र पर क्लिक करता हूं तो ली ईवेंट ट्रिगर हो जाता है। तो टूडू फीका पड़ जाता है और एडिट स्क्रीन दिखाई देती है।

मैं किसी भी सुझाव के लिए बहुत आभारी रहूंगा कि मैं इस समस्या को कैसे हल कर सकता हूं!

5
PieterT2000 27 जिंदा 2020, 13:41

2 जवाब

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

संपादित करें: यदि आप केवल टेक्स्ट पर क्लिक ईवेंट ट्रिगर करते हैं (जो आपके उदाहरण के अनुसार आपको बस इतना ही चाहिए) तो यह काम करता है:

const checkbox = document.querySelector(".checkboxContainer input");
const span = document.querySelector('.edit');

checkbox.addEventListener("change", e => {
	  console.log("only blue fade out")
});

span.addEventListener("click", e => {
		console.log("change text")
});
<li> 
  <label class="checkboxContainer">
	<input type="checkbox">
	<span class="checkmark"></span>
  </label>
  <span class="edit">Lorem ipsum</span>
</li>

आपको जिस समस्या का सामना करना पड़ रहा है वह यह है कि आप पहले ईवेंट पर क्लिक कर रहे हैं।

जैसे ही आप चेकबॉक्स बदलते हैं आप सबसे पहले ली पर क्लिक कर रहे हैं क्योंकि यह मूल तत्व है।

const checkbox = document.querySelector(".checkboxContainer input");

checkbox.addEventListener("change", e => {
    e.stopPropagation();
        console.log("checkbox")
});

const li = document.querySelector('li');
li.addEventListener("click", e => {
    console.log("li")
});

// Onchange Checkbox CONSOLE: 
li
checkbox

// Onclick li CONSOLE: 
li
3
sina_r 27 जिंदा 2020, 15:07

मुझे लगता है कि ऐसा इसलिए है क्योंकि जिस घटना को आप प्रचार से रोक रहे हैं वह वही घटना नहीं है जिसे li ईवेंट हैंडलर में कैप्चर किया जा रहा है। यहां दो घटनाएं हैं, बदली और क्लिक की गई। बस अपने चेकबॉक्स ईवेंट श्रोता में क्लिक के साथ-साथ परिवर्तन जोड़ें और इसे इसे काम करना चाहिए:

const checkbox = document.querySelector(".checkboxContainer input");
checkbox.addEventListener("click", e => {
    e.stopPropagation();
    //rest of code goes here
}):

हालांकि यह समस्याग्रस्त होगा क्योंकि आप अपना चेकबॉक्स छुपा रहे हैं, इसलिए शायद इसे अपने लेबल पर सेट करें।

1
Ashkan Pourghasem 27 जिंदा 2020, 14:00