Problem To Stop Click Event Function On Mousedown Event

Question

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 class="counter" 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.

I think if you remove the onclick function, and keep the onmousedown and onmouseup function, it should give you the same result as onclick. — Mana S
– Mana S, Commented Dec 16, 2021 at 23:09

Kinglish · Accepted Answer · 2021-12-16 23:19:24Z

0

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 class="counter" title="Left Click / Hold Left Click">1</button>
<p>Click On Above Button, Or Hold Left Click To See The Result.</p>

answered Dec 16, 2021 at 23:19

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arash EB Over a year ago

Thankssss, I thought I need to separate them. But Yes, you're right. So many thanks <3

Collectives™ on Stack Overflow

Problem To Stop Click Event Function On Mousedown Event

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related