Problem To Stop Click Event Function On Mousedown Event-CodePudding

I have the code below, to handle two different events. A normal left click & holding down left click :

When users do a normal click, the number add up to one.
When users hold down the left click, the number will adding up while user holding down the mouse and it stops on mouse up.

Also in both events, I send the result number by AJAX and save it on database.

$(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;
        }
    });
});

    .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;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button  title="Left Click / Hold Left Click">1</button>
<p>Click On Above Button, Or Hold Left Click To See The Result.</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.

Also I have tried some solutions like return false, e.stopPropagation(), e.stopImmediatePropagation(), e.preventDefault() & ..., read the same topics on the forum:

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.

Please help me to fix this.

CodePudding user response：

You don't need a separate click function, you can manage it with mousedown and mouseup.

$(document).ready(function() {
  // Click Event
  let ClickStatus = false;
  let interval, element

  $('.counter').mousedown(function() {
    ClickStatus = true;
    element = $(this)
    increment(element)
    interval = setInterval(function() {
      increment(element)
    }, 300);
  }).on('mouseup mouseout', function() {
    if (ClickStatus) {
      clearInterval(interval);

      console.log('Hold Left Click Done!');

      // AJAX
      // ...

      ClickStatus = false;
    } 
  });
});

function increment(el) {
  el.text(Number(el.text()) 1);
}

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button  title="Left Click / Hold Left Click">1</button>
<p>Click On Above Button, Or Hold Left Click To See The Result.</p>