如何区分鼠标的“点击”和“拖动”

我使用jQuery。点击来处理Raphael图形上的鼠标点击事件，同时，我需要处理鼠标拖动事件，鼠标拖动在Raphael中由鼠标下拉，鼠标上拉和鼠标移动组成。

很难区分点击和拖动，因为点击也包含鼠标下拉和鼠标上拉，我怎么能区分鼠标“点击”和鼠标“拖动”然后在Javascript?

当前回答

下面的编码是检测鼠标的移动。

它适用于大多数情况。这也取决于关于如何将mouseevent处理为单击。在JavaScript中，检测非常简单。它不关心如何在鼠标下拉和鼠标上拉之间按住或移动。 Event.detail不会重置为1当你的鼠标移动鼠标下拉和鼠标上拉。如果你需要区分点击和长按，你需要检查事件的差异。时间戳。

// ==== add the code at the begining of your coding ==== let clickStatus = 0; (() => { let screenX, screenY; document.addEventListener('mousedown', (event) => ({screenX, screenY} = event), true); document.addEventListener('mouseup', (event) => (clickStatus = Math.abs(event.screenX - screenX) + Math.abs(event.screenY - screenY) < 3), true); })(); // ==== add the code at the begining of your coding ==== $("#draggable").click(function(event) { if (clickStatus) { console.log(`click event is valid, click count: ${event.detail}`) } else { console.log(`click event is invalid`) } }) <!doctype html> <html lang="en">  <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#draggable" ).draggable(); } ); </script> </head> <body> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> </body> </html>

2021-06-22 10:25:27

其他回答

所有这些解决方案要么在微小的鼠标移动上失效，要么过于复杂。

下面是一个使用两个事件侦听器的简单适应性解决方案。Delta是您必须在上下事件之间水平或垂直移动的距离(以像素为单位)，以便代码将其归类为拖拽而不是单击。这是因为有时你会在抬起鼠标或手指之前移动几个像素点。

const delta = 6;
let startX;
let startY;

element.addEventListener('mousedown', function (event) {
  startX = event.pageX;
  startY = event.pageY;
});

element.addEventListener('mouseup', function (event) {
  const diffX = Math.abs(event.pageX - startX);
  const diffY = Math.abs(event.pageY - startY);

  if (diffX < delta && diffY < delta) {
    // Click!
  }
});

2020-01-14 21:13:48

清洁ES2015

Let drag = false; 文档。addEventListener('mousedown'， () => drag = false); 文档。addEventListener('mousemove'， () => drag = true); 文档。addEventListener('mouseup'， () => console.log(拖动?'拖动':'点击'));

正如其他人评论的那样，没有遇到任何bug。

2018-06-26 19:04:18

很简单，

el = document.getElementById("your_id"); var isDown = false; 埃尔。addEventListener('mousedown'， function () { isDown = true; })；埃尔。addEventListener('mouseup'， function () { isDown = false; })；埃尔。addEventListener('鼠标移动'，函数(){ if (isDown) { //你的代码在这里｝ })；

2022-10-25 07:55:54

使用jQuery和5像素x/y暂停来检测拖动:

var dragging = false;
$("body").on("mousedown", function(e) {
  var x = e.screenX;
  var y = e.screenY;
  dragging = false;
  $("body").on("mousemove", function(e) {
    if (Math.abs(x - e.screenX) > 5 || Math.abs(y - e.screenY) > 5) {
      dragging = true;
    }
  });
});
$("body").on("mouseup", function(e) {
  $("body").off("mousemove");
  console.log(dragging ? "drag" : "click");
});

2017-05-26 07:15:53

如果你已经在使用jQuery:

var $body = $('body');
$body.on('mousedown', function (evt) {
  $body.on('mouseup mousemove', function handler(evt) {
    if (evt.type === 'mouseup') {
      // click
    } else {
      // drag
    }
    $body.off('mouseup mousemove', handler);
  });
});

2013-12-30 00:28:49

如何区分鼠标的“点击”和“拖动”

推荐文章

最新文章

标签