title: How would I cancel a specific event in javascript?
body: <p>I added 2 different events each called <code>touchstart</code> and <code>mousedown</code> in the <code>on</code> method like this:</p>
  
  <blockquote>
    <p><code>this.$el.on('touchstart mousedown', (e) =&gt; { this.start(e); })</code></p>
  </blockquote>
  
  <p>My main goal is to cancel a <code>mousedown</code> event <strong><em>only</em></strong> which belongs to the <code>on</code> method at the end of called <code>end</code> function.</p>
  
  <p>If I run a <code>touchstart</code> event 2 different events are always firing together. See this picture:</p>
  
  <p><a href="https://i.stack.imgur.com/o4z9Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o4z9Q.png" alt="enter image description here"></a></p>
  
  <p>This problem causes undesired event block at Firefox. And also the code runs twice which is unnecessary. I want to redirect the website when I <code>click</code> or <code>touch</code> the element, prevent when I <code>drag</code> or <code>swipe</code>.</p>
  
  <p>I searched about how to prevent a specific event on google but haven't found any of info so I've tried few ways by myself. However, all of the cases didn't work.   </p>
  
  <ol>
  <li><p>Add <code>return false;</code> line</p>
  
  <ul>
  <li>Sadly, <code>return false</code> makes stop all of the remained events after <code>end</code> function has ended. My goal is to cancel the <code>mousedown</code> only, not the entire of the <code>events</code>. Therefore I can't just put the line into the function.</li>
  </ul></li>
  <li><p>Add <code>mousedown</code> event into the <code>off</code> method</p>
  
  <ul>
  <li>This also doesn't work. The <code>events</code> which belongs to the <code>off</code> method still remains as it's turned off. So if I try to drag after I swiped the element, nothing happens because <code>mousedown</code> event is now turned off.</li>
  </ul></li>
  <li><p>Add <code>preventDefault()</code> or <code>stopPropagation()</code></p>
  
  <ul>
  <li>Those can't use as the same reason of case 1. </li>
  </ul></li>
  <li><p>Using <code>RegExp</code> to separate and make a new function for Firefox</p>
  
  <ul>
  <li>The problem was firing the undesired event, not the browser.</li>
  </ul></li>
  </ol>
  
  <p>Are there any ways to cancel a specific <code>event</code> in this code?</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>class Evt {
    constructor($el) {
      this.$el = $el;
    }
    start(e) {
      console.log('start Function');
      this.$el.off('click');
      this.$el.on({
        ['touchmove mousemove']: (e) =&gt; this.eventmove(e),
        ['touchend mouseup']: (e) =&gt; this.end(e)
      });
    }
    eventmove(e) {
      e.preventDefault();
      console.log('move function');
      this.$el.on('click', (e) =&gt; {e.preventDefault();});
      return false;
    }
    end(e) {
      console.log('end function');
      this.$el.on('click');
      this.$el.off('touchmove touchend mousemove mouseup');
    }
    apply() {
      this.$el.on('touchstart mousedown', (e) =&gt; {
        this.start(e);
      })
    }
  }
  var thatEvt = new Evt($('#link'));
  thatEvt.apply();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>      a {
          width: 100%;
          height: 200px;
          border-radius: 10px;
          background-color: brown;
          font-family: Helvetica;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;a id="link" href="https://google.co.uk"&gt;
        Click/Touch and Drag/Swipe
      &lt;/a&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>