来自@Przemek的回答，

函数listenClickOnly(元素，回调，阈值=10){ 让拖动= 0; 元素。addEventListener('mousedown'， () => drag = 0); 元素。addEventListener('mousemove'， () => drag++); 元素。addEventListener('mouseup'， e => { 如果(拖动<阈值)回调(e); })； ｝ listenClickOnly ( 文档, () => console.log('click')， 10 ）;

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

很简单，

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

来自@Przemek的回答，

函数listenClickOnly(元素，回调，阈值=10){ 让拖动= 0; 元素。addEventListener('mousedown'， () => drag = 0); 元素。addEventListener('mousemove'， () => drag++); 元素。addEventListener('mouseup'， e => { 如果(拖动<阈值)回调(e); })； ｝ listenClickOnly ( 文档, () => console.log('click')， 10 ）;

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

如果你想使用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在他的回答中所做的直接克隆，但转换为RxJs。

样本的使用也很有趣。示例操作符将从源(mousedown和mousemove的合并)中获取最新的值，并在内部观察对象(mouseup)发出时发出它。