title: How to stop bubbling on the particular element of DOM?
body: <p>How to stop bubbling on exactly the particula element of the list <code>ul</code>?
  In my case, it is <code>&lt;li&gt;</code> first child element of <code>ul</code> which has <code>data-slide-id</code> argument I want to pull out?</p>
  
  <p>My JS file:</p>
  
  <pre><code>  onSlideClick() {
      document.getElementsByClassName('slider__container')[0].addEventListener('click', (e) =&gt; {
        e.preventDefault()
        console.log(e.target)
      })
    }
  </code></pre>
  
  <p>EDIT:
  I was trying also:</p>
  
  <pre><code>  onSlideClick() {
      this.container[0].addEventListener('click', (e) =&gt; {
        e.stopPropagation()
        console.log(e.target)
      })
    }
  </code></pre>
  
  <p>In this scenario, when I click on list ul I get various elements in console like:
  <code>&lt;p&gt;Lorem...... &lt;/p&gt;</code> or <code>&lt;h3&gt;Lorem.....&lt;/h3&gt;</code> </p>
  
  <p>and I want this function to dig only to: </p>
  
  <p><code>&lt;li class="slider__card slider__margin-t--1" data-slide-id="1"&gt; &lt;/li&gt;</code> element.</p>
  
  <p>My index.html:</p>
  
  <pre><code>    &lt;ul class="slider__container"&gt;
        &lt;!-- 1 slide --&gt;
        &lt;li class="slider__card slider__margin-t--1" data-slide-id="1"&gt;
          &lt;div class="slider__card-pic"&gt;
            &lt;img &gt;
            &lt;img &gt;
          &lt;/div&gt;
          &lt;div class="slider__card-text"&gt;
            &lt;h3&gt;Excepteur sint occaecat&lt;/h3&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;!-- 2 slide --&gt;
        &lt;!-- 3 slide --&gt;
        &lt;!-- 4 slide --&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>PS. I was trying e.stopPropagation() too.</p>
  
  <p><strong>EDIT Solution:</strong></p>
  
  <p>I Found some kind of hack solution, but not ideal... If someone has better idea please let me know:</p>
  
  <pre><code>  onSlideClick() {
      console.log(this.container)
      this.container.addEventListener('click', (e) =&gt; {
        if (e.target.parentNode.parentNode &amp;&amp; e.target.parentNode.parentNode.nodeName == 'LI') {
          console.log(e.target.parentNode.parentNode)
        }  
      }) 
    }
  </code></pre>