title: Problem To Stop Click Event Function On Mousedown Event
body: <p>I have the code below, to handle two different events. A <strong>normal left click</strong> &amp; <strong>holding down left click</strong> :</p>
  <ul>
  <li>When users do a normal click, the number add up to one.</li>
  <li>When users hold down the left click, the number will adding up while user holding down the mouse and it stops on mouse up.</li>
  </ul>
  <p>Also in both events, I send the result number by AJAX and save it on database.</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>$(document).ready(function() {
      // Normal Click Event
      $('.counter').click(function() {
          var GetNumber = parseInt($(this).text());
          $(this).text(GetNumber + 1);
          
          console.log('Left Click Done!');
          
          // AJAX
          // ...
      });
      
      
      // Hold Click Event
      var ClickStatus = false;
      
      $('.counter').mousedown(function(){
          var Element = $(this);
          var GetNumber = parseInt(Element.text());
          ClickStatus = true;
          
          window.TimeOut = setInterval(function(){
              Element.text(GetNumber++);
          }, 300);
  
          return false;
      });
      $('.counter').on('mouseup mouseout',function(){
          if (ClickStatus){
              clearInterval(window.TimeOut);
              
              console.log('Hold Left Click Done!');
              
              // AJAX
              // ...
              
              ClickStatus = false;
              return false;
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .counter {
          width: 50px;
          height: 50px;
          background-color: #1000ff;
          border-radius: 5px;
          border: 0;
          text-align: center;
          color: #ffffff;
          font-size: 24px;
      }
      .counter:hover {
          opacity: 0.7;
          cursor: pointer;
      }
      p {
          font-family: tahoma;
          font-size: 12px;
          margin-top: 20px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button class="counter" title="Left Click / Hold Left Click"&gt;1&lt;/button&gt;
  &lt;p&gt;Click On Above Button, Or Hold Left Click To See The Result.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The problem is that both events are firing together! I don't want it, I need to trigger just one of them at time, which means I need to run the events separately.<br></p>
  <p>Also I have tried some solutions like <code>return false</code>, <code>e.stopPropagation()</code>, <code>e.stopImmediatePropagation()</code>, <code>e.preventDefault()</code> &amp; ..., read the same topics on the forum:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/8643739/cancel-click-event-in-the-mouseup-event-handler">Cancel click event in the mouseup event handler</a></li>
  <li><a href="https://stackoverflow.com/questions/30056647/jquery-mousedown-mouseup-prevent-click">Jquery mousedown/mouseup prevent click</a></li>
  </ul>
  <p>but unfortunately none of them worked for me and I couldn't find something helpful about it. I'm so confused and have no idea.</p>
  <p>Please help me to fix this.</p>