【问题标题】:Difference between mousedown and click in jqueryjquery中mousedown和click的区别
【发布时间】:2018-11-16 13:34:19
【问题描述】:

我正在学习 jquery 中的事件。在实施它们时,我遇到了一个疑问。 mousedown() 和 click() 事件有什么区别。我应该在什么条件下使用哪个事件?

例如: 这两个事件在以下代码中执行相同的任务:

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});


$("#p1").click(function(){
  alert("Mouse down over p1!");
});

两者执行相同。有人可以澄清区别吗?如果相同,我应该更喜欢哪个?。

【问题讨论】:

  • 考虑Dragging的情况,你会得到答案。

标签: jquery


【解决方案1】:

onMouseDown 将在按下左或右(或中间)时触发。同样,onMouseUp 将在任何按钮被释放时触发。 onMouseDown 将在鼠标点击对象然后移开对象时触发,而onMouseUp 将在您单击并按住其他位置的按钮然后在对象上方释放时触发。

onClick 只会在同一对象上按下并释放鼠标左键时触发。如果您关心顺序,如果同一个对象设置了所有 3 个事件,则它是 onMouseDownonMouseUp,然后是 onClick。每个偶数应该只触发一次。

详情:

http://api.jquery.com/click/
http://api.jquery.com/mouseup/
http://api.jquery.com/mousedown/

SourceAnton Baksheiev写的

【讨论】:

  • 那些 URL 指的是 jQuery,而 onClickonMouseUpOnMouseDown 并不是真正的 jQuery 事件,而是 JavaScript 事件。我认为最好链接到a w3c spec in this case.(在链接页面上向下滚动一点)
  • 但是如果我们在同一个元素上同时绑定 click 和 mousedown 事件。 mousedown 事件总是触发而不是点击。为什么会这样。如果我们需要同时按下鼠标和单击,我们该怎么办。看到这个 jsfiddle jsfiddle.net/a74k92dd
【解决方案2】:

在按下鼠标按钮但在释放之前触发mousedown 事件。

click 事件在mousedownmouseup 事件之后触发。

【讨论】:

  • 您还应该提到,如果 mousedown 和 mouseup 事件发生在同一个元素上,则会触发 'click' 事件。
【解决方案3】:

$(element).click() 触发,当您按下鼠标按钮然后释放它。

$(element).mousedown() 触发,然后按下鼠标按钮。

尝试将单击的按钮按住该按钮,然后在此处释放:http://jsfiddle.net/n9rJ9/

【讨论】:

    【解决方案4】:

    他们没有。您可能会这样认为,因为您将两个事件处理程序绑定在同一个元素上,因此 mousedown 将始终在 click 事件发生之前触发。

    如果您将它们绑定到不同的元素上,您将看到 mousdown 将始终在按下按钮(任何鼠标按钮)时触发而不释放,并且在您释放左侧(主)侧的鼠标按钮后单击将触发。

    看到这个小 jsfiddle:http://jsfiddle.net/wBfbm/

    $("#p1").mousedown(function(){
      alert("Mouse down over p1!");
    });
    
    
    $("#p2").click(function(){
      alert("Mouse down over p1!");
    });
    

    【讨论】:

      【解决方案5】:

      onMouseDown 将在按下左或右(或中)时触发。

      onClick 只会在同一对象上按下并释放鼠标左键时触发。

      【讨论】:

        【解决方案6】:

        试试这个方法。因为 event.stopPropagation 不会从鼠标按下停止单击事件事件。鼠标按下和单击事件彼此不相关。

         var mousedDownFired = false;
        
          $("#id").mousedown(function(event){
              mousedDownFired =true;
              //code
          });
        
          $("#id").click(function(event){
             if(mousedDownFired)
              {
                 mousedDownFired = false;
                 return;
              }
              //code
         });
        

        更新:

        没有。鼠标事件是这样触发的

        1) 鼠标按下

        2) 点击

        3) 鼠标向上

        如果触发了鼠标按下,那么在鼠标按下事件单击将触发后,标志将启用。在此单击事件中,将禁用标志变量。这将作为循环方式工作。不会考虑两下鼠标或两下点击

        【讨论】:

        • 这完全是错误的。您需要更新此帖子,使其具有正确的信息。你可以从这个codepen中清楚地看到,顺序是mousedown、mouseup、click:codepen.io/mudassir0909/pen/eIHqB
        • 顺序可能因所使用的浏览器而异。我没有跨浏览器测试它。但是,在我对 Chrome 中处理的事件的观察中,事件是按 mousedown、mouseup 和 click 的顺序触发的。
        • 所有浏览器按顺序触发:mousedown、mouseup、click,而不是本答案中所述的顺序。
        【解决方案7】:

        onmousedown + onmouseup = onclick(点击事件);

        ** actions **                             ** event **
        
        mouse press/down                          onmousedown
        mouse release/up                          onmouseup
        mouse press/down + mouse release/up       onclick
        Key Enter/space press                     onclick  
        

        【讨论】:

          猜你喜欢
          • 2011-12-22
          • 1970-01-01
          • 1970-01-01
          • 2014-06-21
          • 1970-01-01
          • 1970-01-01
          • 2019-02-23
          • 2015-02-05
          • 2011-09-13
          相关资源
          最近更新 更多