如何使用 JavaScript 区分鼠标“单击”和“拖动”事件？

使用 Web 元素，用户可以根据需要拖动或单击元素。区分拖动和点击事件很重要。 JavaScript 是一种高级的、动态类型的编程语言，可用于区分拖动和单击事件。 JavaScript 有一个拖动和点击事件，有助于区分两者。本文演示了区分单击和拖动事件的两种方法。在第一种方法中，我们将在控制台上显示输出，而在第二种方法中，我们将在网页本身上显示输出。用户可以在方便时选择任一方法。

方法 1：我们有一个网页，其中在控制台中记录了任何类型的点击或拖动事件。单击和拖动事件之间的基本区别在于鼠标移动。区分单击和拖动事件的鼠标事件是“鼠标移动”事件。在“点击”事件中，没有“鼠标移动”事件。然而，“mouse down”和“mouse up”事件对于单击和拖动都是相同的。
下面的 JavaScript 代码显示了一个名为drag的变量是用“ false ”布尔值启动的。对于“mouse down”事件，’ drag ‘ 变量仍然是false 。但是一旦“鼠标移动”事件被触发，拖动变量就会设置为“ true ”。在“mouse up”事件中，拖动变量的值被检查。如果值为true ，则发生了“拖动”事件，并且输出显示在控制台中。如果值为“ false ”，则表示没有“鼠标移动”事件，这也意味着“点击”事件已经发生。因此，单击输出显示到控制台。

    let drag = false;
    document.addEventListener(
        'mousedown', () => drag = false);
  
    document.addEventListener(
        'mousemove', () => drag = true);
  
    document.addEventListener(
        'mouseup', () => console.log(
            drag ? 'drag' : 'click'));

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

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

JavaScript 事件ondrag和onclick帮助我们达到预期的结果。单击该元素时，将在网页本身的元素下方显示单击消息。拖动元素时，会在网页本身的元素下方显示一条拖动消息。根据用户用户活动触发点击和拖动事件，然后执行与事件对应的操作。

  

    
        Click Me or Drag Me!
    
      
    
      
    
        document.ondrag = function (event) {
            document.getElementById("demo").innerHTML
                        = "Element is being dragged";
        };
  
        document.onclick = function (event) {
            document.getElementById("demo").innerHTML
                    = "Element is being clicked!";
        };
    

  

输出：

• 单击元素时：

  

• 当元素被拖动时：