问题停止点击事件 Function 在鼠标按下事件

Question

Hello everyone and dear stackoverflow's users.

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 (like this , or this ) 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 guys.

Kindly please help me to fix this, give me your ideas. In advance many thanks for your helpful helps. <3

Answer 1

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>