title: How to listen an event only within a specific component in React?
body: <p>I am using this code as a base to create a touchable slider in ReactJS so that the user can change the sliders with their fingers, and it works fine, however I need the events to be triggered only within the carousel (<code>track div</code>), what is not happening here. In this example the events are triggered from any part of the screen (you can try it on the blue part).</p>
  <p>Is there a way I can do this, make the eventlisteners work only within a specific component (which here is just a div)?</p>
  <p>Remember, I'm using React, this is just an example.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const track = document.querySelector('.track');
  let initialPosition = null;
  let moving = false;
  let transform = 0;
  
  const gestureStart = (e) =&gt; {
    initialPosition = e.pageX;
    moving = true;
    const transformMatrix = window.getComputedStyle(track).getPropertyValue('transform');
    if (transformMatrix !== 'none') {
      transform = parseInt(transformMatrix.split(',')[4].trim());
    }
  }
  
  const gestureMove = (e) =&gt; {
    if (moving) {
      const currentPosition = e.pageX;
      const diff = currentPosition - initialPosition;
      track.style.transform = `translateX(${transform + diff}px)`;  
    }
  };
  
  const gestureEnd = (e) =&gt; {
    moving = false;
  }
  
  if (window.PointerEvent) {
    window.addEventListener('pointerdown', gestureStart);
  
    window.addEventListener('pointermove', gestureMove);
  
    window.addEventListener('pointerup', gestureEnd);  
  } else {
    window.addEventListener('touchdown', gestureStart);
  
    window.addEventListener('touchmove', gestureMove);
  
    window.addEventListener('touchup', gestureEnd);  
    
    window.addEventListener('mousedown', gestureStart);
  
    window.addEventListener('mousemove', gestureMove);
  
    window.addEventListener('mouseup', gestureEnd);  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  .carousel {
    width: 100vw;
    height: 100vh;
    background: blue;
    position: relative;
    overflow: hidden;
    
  }
  .carousel .track {
    position: absolute;
    top: 50px;
    left: 10px;
    display: inline-flex;
    touch-action: none;
  }
  
  .carousel .track .card {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 3px;
    margin-right: 20px;
  }
  
  h2 {
    color: white;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="carousel"&gt;
      &lt;h2&gt;It shouldn't work here outside of the carousel&lt;/h2&gt;
      &lt;div class="track"&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>