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

区别在于拖动中mousedown和mouseup之间有mousemove，但在单击中没有。

你可以做这样的事情：

const element = document.createElement('div')
element.innerHTML = 'test'
document.body.appendChild(element)
let moved
let downListener = () => {
  moved = false
}
element.addEventListener('mousedown', downListener)
let moveListener = () => {
  moved = true
}
element.addEventListener('mousemove', moveListener)
let upListener = () => {
  if (moved) {
    console.log('moved')
  } else {
    console.log('not moved')
  }
}
element.addEventListener('mouseup', upListener)
// release memory
element.removeEventListener('mousedown', downListener)
element.removeEventListener('mousemove', moveListener)
element.removeEventListener('mouseup', upListener)

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

下面是使用两个事件侦听器的简单自适应解决方案。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!
  }
});

清洁剂 ES2015

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

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

如果你已经在使用 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);
  });
});

这应该可以很好地工作。与接受的答案类似（尽管使用 jQuery），但仅当新的鼠标位置与事件mousedown不同的鼠标位置时，才会重置 isDragging 标志。与公认的答案不同，这适用于最新版本的Chrome，无论鼠标是否移动，都会触发mousemove。

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 = [];
    });

添加一点容差（即将微小的移动视为单击，而不是拖动），您也可以调整坐标检查mousemove。

如果你想使用 Rxjs：

var element = document;
Rx.Observable
  .merge(
    Rx.Observable.fromEvent(element, 'mousedown').mapTo(0),
    Rx.Observable.fromEvent(element, 'mousemove').mapTo(1)
  )
  .sample(Rx.Observable.fromEvent(element, 'mouseup'))
  .subscribe(flag => {
      console.clear();
      console.log(flag ? "drag" : "click");
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/@reactivex/rxjs@5.4.1/dist/global/Rx.js"></script>

这是@wong2在他的回答中所做的直接克隆，但转换为 RxJ。

sample也很有趣。sample运算符将从源（mousedown和mousemove的merge）获取最新值，并在内部可观察值（mouseup）发出时发出它。

正如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函数来自这个答案

使用 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");
});

你可以这样做：

var div = document.getElementById("div");
div.addEventListener("mousedown", function() {
  window.addEventListener("mousemove", drag);
  window.addEventListener("mouseup", lift);
  var didDrag = false;
  function drag() {
    //when the person drags their mouse while holding the mouse button down
    didDrag = true;
    div.innerHTML = "drag"
  }
  function lift() {
    //when the person lifts mouse
    if (!didDrag) {
      //if the person didn't drag
      div.innerHTML = "click";
    } else div.innerHTML = "drag";
    //delete event listeners so that it doesn't keep saying drag
    window.removeEventListener("mousemove", drag)
    window.removeEventListener("mouseup", this)
  }
})

body {
  outline: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}
#div {
  /* calculating -5px for each side of border in case border-box doesn't work */
  width: calc(100vw - 10px);
  height: calc(100vh - 10px);
  border: 5px solid orange;
  background-color: yellow;
  font-weight: 700;
  display: grid;
  place-items: center;
  user-select: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

<html>
  <body>
    <div id="div">Click me or drag me.</div>
  </body>
</html>

树列表中遇到了同样的问题，用户可以在其中单击或拖动它，因此将这个小Pointer类放在我的utils.js

function Pointer(threshold = 10) {
  let x = 0;
  let y = 0;
  return {
    start(e) {
     x = e.clientX;
     y = e.clientY;
    },
    isClick(e) {
      const deltaX = Math.abs(e.clientX - x);
      const deltaY = Math.abs(e.clientY - y);
      return deltaX < threshold && deltaY < threshold;
    }
  }
}

在这里，您可以看到它在工作中：

function Pointer(threshold = 10) {
  let x = 0;
  let y = 0;
  return {
    start(e) {
     x = e.clientX;
     y = e.clientY;
    },
    isClick(e) {
      const deltaX = Math.abs(e.clientX - x);
      const deltaY = Math.abs(e.clientY - y);
      return deltaX < threshold && deltaY < threshold;
    }
  }
}
const pointer = new Pointer();
window.addEventListener('mousedown', (e) => pointer.start(e))
//window.addEventListener('mousemove', (e) => pointer.last(e))
window.addEventListener('mouseup', (e) => {
  const operation = pointer.isClick(e) 
    ? "Click"
    : "Drag"
  console.log(operation)
})

真的就是这么简单

var dragged = false
window.addEventListener('mousedown', function () { dragged = false })
window.addEventListener('mousemove', function () { dragged = true })
window.addEventListener('mouseup', function() {
        if (dragged == true) { return }
        console.log("CLICK!! ")
})

老实说，您不想添加允许小动作的阈值。以上是点击所有桌面界面的正确、正常感觉。

试试吧。

如果您愿意，可以轻松添加事件。

如果只是为了过滤掉拖拽情况，请这样做：

var moved = false;
$(selector)
  .mousedown(function() {moved = false;})
  .mousemove(function() {moved = true;})
  .mouseup(function(event) {
    if (!moved) {
        // clicked without moving mouse
    }
  });

使用距离阈值的基于类的香草JS的另一种解决方案

private initDetectDrag(element) {
    let clickOrigin = { x: 0, y: 0 };
    const dragDistanceThreshhold = 20;
    element.addEventListener('mousedown', (event) => {
        this.isDragged = false
        clickOrigin = { x: event.clientX, y: event.clientY };
    });
    element.addEventListener('mousemove', (event) => {
        if (Math.sqrt(Math.pow(clickOrigin.y - event.clientY, 2) + Math.pow(clickOrigin.x - event.clientX, 2)) > dragDistanceThreshhold) {
            this.isDragged = true
        }
    });
}

在类中添加（SOMESLIDER_ELEMENT也可以是全局文档）：

private isDragged: boolean;
constructor() {
    this.initDetectDrag(SOMESLIDER_ELEMENT);
    this.doSomeSlideStuff(SOMESLIDER_ELEMENT);
    element.addEventListener('click', (event) => {
        if (!this.sliderIsDragged) {
            console.log('was clicked');
        } else {
            console.log('was dragged, ignore click or handle this');
        }
    }, false);
}

Pure JS with DeltaX 和 DeltaY

此 DeltaX 和 DeltaY 由接受答案中的评论所建议，以避免在尝试单击并获得拖动操作时由于一个刻度鼠标移动而令人沮丧的体验。

    deltaX = deltaY = 2;//px
    var element = document.getElementById('divID');
    element.addEventListener("mousedown", function(e){
        if (typeof InitPageX == 'undefined' && typeof InitPageY == 'undefined') {
            InitPageX = e.pageX;
            InitPageY = e.pageY;
        }
    }, false);
    element.addEventListener("mousemove", function(e){
        if (typeof InitPageX !== 'undefined' && typeof InitPageY !== 'undefined') {
            diffX = e.pageX - InitPageX;
            diffY = e.pageY - InitPageY;
            if (    (diffX > deltaX) || (diffX < -deltaX)
                    || 
                    (diffY > deltaY) || (diffY < -deltaY)   
                    ) {
                console.log("dragging");//dragging event or function goes here.
            }
            else {
                console.log("click");//click event or moving back in delta goes here.
            }
        }
    }, false);
    element.addEventListener("mouseup", function(){
        delete InitPageX;
        delete InitPageY;
    }, false);
   element.addEventListener("click", function(){
        console.log("click");
    }, false);

对于OSM地图上的公共操作（单击时放置标记），问题是：1）如何确定鼠标向下>向上的持续时间（您无法想象为每次单击创建一个新标记）和2）鼠标是否在向下>向上移动（即用户正在拖动地图）。

const map = document.getElementById('map');
map.addEventListener("mousedown", position); 
map.addEventListener("mouseup", calculate);
let posX, posY, endX, endY, t1, t2, action;
function position(e) {
  posX = e.clientX;
  posY = e.clientY;
  t1 = Date.now();
}
function calculate(e) {
  endX = e.clientX;
  endY = e.clientY;
  t2 = (Date.now()-t1)/1000;
  action = 'inactive';
  if( t2 > 0.5 && t2 < 1.5) { // Fixing duration of mouse down->up
      if( Math.abs( posX-endX ) < 5 && Math.abs( posY-endY ) < 5 ) { // 5px error on mouse pos while clicking
         action = 'active';
         // --------> Do something
      }
  }
  console.log('Down = '+posX + ', ' + posY+''nUp = '+endX + ', ' + endY+ ''nAction = '+ action);    
}

基于这个答案，我在 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} />
    );
})

如果要检查特定元素的单击或拖动行为，则可以执行此操作，而无需听正文。

$(document).ready(function(){
  let click;
  
  $('.owl-carousel').owlCarousel({
    items: 1
  });
  
  // prevent clicks when sliding
  $('.btn')
    .on('mousemove', function(){
      click = false;
    })
    .on('mousedown', function(){
      click = true;
    });
    
  // change mouseup listener to '.content' to listen to a wider area. (mouse drag release could happen out of the '.btn' which we have not listent to). Note that the click will trigger if '.btn' mousedown event is triggered above
  $('.btn').on('mouseup', function(){
    if(click){
      $('.result').text('clicked');
    } else {
      $('.result').text('dragged');
    }
  });
});

.content{
  position: relative;
  width: 500px;
  height: 400px;
  background: #f2f2f2;
}
.slider, .result{
  position: relative;
  width: 400px;
}
.slider{
  height: 200px;
  margin: 0 auto;
  top: 30px;
}
.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100px;
  background: #c66;
}
.result{
  height: 30px;
  top: 10px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<div class="content">
  <div class="slider">
    <div class="owl-carousel owl-theme">
      <div class="item">
        <a href="#" class="btn" draggable="true">click me without moving the mouse</a>
      </div>
      <div class="item">
        <a href="#" class="btn" draggable="true">click me without moving the mouse</a>
      </div>
    </div>
    <div class="result"></div>
  </div>
  
</div>

来自@Przemek的答案，

function listenClickOnly(element, callback, threshold=10) {
  let drag = 0;
  element.addEventListener('mousedown', () => drag = 0);
  element.addEventListener('mousemove', () => drag++);
  element.addEventListener('mouseup', e => {
    if (drag<threshold) callback(e);
  });
}
listenClickOnly(
  document,
  () => console.log('click'),
  10
);

以下编码是检测mouseup和mousedown的运动。

它适用于大多数情况。这也取决于关于您如何将mouseevent视为点击。

在 JavaScript 中，检测非常简单。它不关心如何长按或在鼠标按下和鼠标向上之间移动。 Event.detail 不会重置为 1 当您的鼠标在mousedown和mouseup.

如果需要区分点击和长按，则需要还要检查event.timeStamp的差异。

// ==== 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">
<!-- coding example from https://jqueryui.com/draggable/ -->
<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>

非常简单，

el = document.getElementById("your_id");
var isDown = false;
el.addEventListener('mousedown', function () {
    isDown = true;
});
el.addEventListener('mouseup', function () {
    isDown = false;
});
el.addEventListener('mousemove', function () {
    if (isDown) {
        // your code goes here
    }
});