在 Mousedown 事件上停止单击事件函数的问题

Question

我有下面的代码来处理两个不同的事件。 普通左键单击和按住左键单击：

• 当用户正常点击时，数字加一。
• 当用户按住左键单击时，当用户按住鼠标时，数字将累加，并在鼠标上升时停止。

同样在这两个事件中，我通过 AJAX 发送结果编号并将其保存在数据库中。

$(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>

问题是两个事件同时触发！我不想要它，我只需要一次触发其中一个，这意味着我需要单独运行这些事件。

我也尝试过一些解决方案，例如return false、e.stopPropagation()、e.stopImmediatePropagation()、e.preventDefault() 和 ...，请阅读论坛上的相同主题：

• Cancel click event in the mouseup event handler
• Jquery mousedown/mouseup prevent click

但不幸的是，它们都不适合我，我找不到有用的东西。我很困惑，不知道。

请帮我解决这个问题。

Answer 1

您不需要单独的点击功能，您可以通过 mousedown 和 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>