JavaScript 如何区分鼠标“点击”和“拖动”事件

在处理Web元素时，用户可能会根据需求拖动或点击元素。区分拖动和点击事件非常重要。JavaScript是一种高级、动态类型的编程语言，可以用于区分拖动和点击事件。JavaScript具有两个事件，即拖动事件和点击事件，可以帮助区分两者。本文演示了区分点击和拖动事件的两种方法。第一种方法是在控制台上显示输出，而第二种方法是在网页本身上显示输出。用户可以根据自己的便利选择任一方法。

方法1： 我们有一个网页，任何类型的点击或拖动事件都会在控制台上记录。点击事件和拖动事件之间的基本区别是鼠标的移动。区分点击和拖动事件的鼠标事件是“鼠标移动”事件。在“点击”事件中，没有“鼠标移动”事件。然而，“鼠标按下”和“鼠标松开”事件对于点击和拖动都是一样的。

下面的JavaScript代码显示了一个名为drag的变量，初始化为布尔值false。在“鼠标按下”事件中，drag变量保持false。但是，一旦触发了“鼠标移动”事件，drag变量就被设置为true。在“鼠标松开”事件中，检查drag变量的值。如果值为true，则表示发生了“拖动”事件，并在控制台上显示输出。如果值为false，则意味着没有“鼠标移动”事件，也就是发生了“点击”事件。因此在控制台上显示点击输出。

示例： 本示例展示了上述方法的应用。

<script type="text/javascript"> 
    let drag = false; 
    document.addEventListener( 
        'mousedown', () => drag = false); 
      
    document.addEventListener( 
        'mousemove', () => drag = true); 
      
    document.addEventListener( 
        'mouseup', () => console.log( 
            drag ? 'drag' : 'click')); 
</script>

输出： 在点击和拖动事件中，将输出显示在控制台中，如下所示。

方法2： 第二种方法是针对特定元素，并不适用于网页中的其他所有元素。我们选择一个元素来记录“点击”或“拖动”事件。在下面的示例中，选择一个段落作为所需的元素，并分配‘ draggable ‘和‘ clickable ‘属性为 true ，表示该元素可以被拖动和点击。

JavaScript事件 ondrag 和 onclick 帮助我们实现期望的结果。当元素被点击时，在网页本身的元素下方显示一个点击消息。当元素被拖动时，在网页本身的元素下方显示一个拖动消息。点击和拖动事件根据用户的操作触发，然后执行相应的动作。

示例： 此示例展示了上述解释的方法。

<p id="dragtarget" draggable="true" clickable="true"> 
    Click Me or Drag Me! 
</p> 
  
<p id="demo" style="color:red;"></p> 
  
<script type="text/javascript"> 
    document.ondrag = function (event) { 
        document.getElementById("demo").innerHTML 
                    = "Element is being dragged"; 
    }; 
      
    document.onclick = function (event) { 
        document.getElementById("demo").innerHTML 
                = "Element is being clicked!"; 
    }; 
</script>

输出：