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

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

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

当前回答

使用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

其他回答

很简单，

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

正如mrjrdnthms在他对接受的答案的评论中指出的那样，这不再适用于Chrome(它总是触发鼠标移动)，我已经改编了Gustavo的答案(因为我使用jQuery)来解决Chrome的行为。

var currentPos = [];

$(document).on('mousedown', function (evt) {

   currentPos = [evt.pageX, evt.pageY]

  $(document).on('mousemove', function handler(evt) {

    currentPos=[evt.pageX, evt.pageY];
    $(document).off('mousemove', handler);

  });

  $(document).on('mouseup', function handler(evt) {

    if([evt.pageX, evt.pageY].equals(currentPos))
      console.log("Click")
    else
      console.log("Drag")

    $(document).off('mouseup', handler);

  });

});

Array.prototype.equals函数来自这个答案

2015-06-26 19:18:53

这应该能很好地工作。类似于已接受的答案(虽然使用jQuery)，但只有当新的鼠标位置与mousedown事件上的位置不同时，isdrag标志才会重置。与公认的答案不同，这适用于最新版本的Chrome，无论鼠标是否移动，鼠标移动都会被触发。

var isDragging = false;
var startingPos = [];
$(".selector")
    .mousedown(function (evt) {
        isDragging = false;
        startingPos = [evt.pageX, evt.pageY];
    })
    .mousemove(function (evt) {
        if (!(evt.pageX === startingPos[0] && evt.pageY === startingPos[1])) {
            isDragging = true;
        }
    })
    .mouseup(function () {
        if (isDragging) {
            console.log("Drag");
        } else {
            console.log("Click");
        }
        isDragging = false;
        startingPos = [];
    });

你也可以在鼠标移动中调整坐标检查，如果你想增加一点公差(即将微小的移动视为点击，而不是拖动)。

2016-09-24 17:34:30

基于这个答案，我在React组件中这样做:

export default React.memo(() => {
    const containerRef = React.useRef(null);

    React.useEffect(() => {
        document.addEventListener('mousedown', handleMouseMove);

        return () => document.removeEventListener('mousedown', handleMouseMove);
    }, []);

    const handleMouseMove = React.useCallback(() => {
        const drag = (e) => {
            console.log('mouse is moving');
        };

        const lift = (e) => {
            console.log('mouse move ended');
            window.removeEventListener('mousemove', drag);
            window.removeEventListener('mouseup', this);
        };

        window.addEventListener('mousemove', drag);
        window.addEventListener('mouseup', lift);
    }, []);

    return (
        <div style={{ width: '100vw', height: '100vh' }} ref={containerRef} />
    );
})

2020-11-10 09:59:24

你可以这样做:

2020-09-19 20:23:08

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

推荐文章

最新文章

标签