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

Posted 2023-05-08

【中文标题】在 Mousedown 事件上停止单击事件函数的问题

【英文标题】：Problem To Stop Click Event Function On Mousedown Event

【发布时间】：2022-01-19 23:43:43

【问题描述】：

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

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

同样在这两个事件中，我通过 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

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

请帮我解决这个问题。

【问题讨论】：

我想如果你去掉onclick函数，保留onmousedown和onmouseup函数，它应该给你和onclick一样的结果。

【参考方案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>

【讨论】：

谢谢，我想我需要将它们分开。但是，是的，你是对的。非常感谢