blocks|key|680000|text|我认为不同之处在于，在拖动时mousedown和mouseup之间存在mousemove，而不是在单击时。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|680001|你可以这样做：|680002|​|680003|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)|code-block|syntax|javascript|680004|680005|entityMap^0|E|9|O|7|Z|9|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|10|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|Q|$]]

<p>I think the difference is that there is a <code>mousemove</code> between <code>mousedown</code> and <code>mouseup</code> in a drag, but not in a click.</p>
<p>You can do something like this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const element = document.createElement('div')
element.innerHTML = 'test'
document.body.appendChild(element)
let moved
let downListener = () =&gt; {
  moved = false
}
element.addEventListener('mousedown', downListener)
let moveListener = () =&gt; {
  moved = true
}
element.addEventListener('mousemove', moveListener)
let upListener = () =&gt; {
  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)</code></pre>
</div>
</div>
</p>


blocks|key|680421|text|更干净的ES2015|type|unstyled|depth|inlineStyleRanges|entityRanges|data|680422|​|680423|let+drag+=+false;

document.addEventListener('mousedown',+()+=>+drag+=+false);
document.addEventListener('mousemove',+()+=>+drag+=+true);
document.addEventListener('mouseup',+()+=>+console.log(drag+?+'drag'+:+'click'));|code-block|syntax|javascript|680424|680425|没有遇到任何bug，正如其他人评论的那样。|680426|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<h2>Cleaner ES2015</h2>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let drag = false;

document.addEventListener('mousedown', () =&gt; drag = false);
document.addEventListener('mousemove', () =&gt; drag = true);
document.addEventListener('mouseup', () =&gt; console.log(drag ? 'drag' : 'click'));</code></pre>
</div>
</div>
</p>

<p>Didn't experience any bugs, as others comment.</p>


blocks|key|896762|text|如果您已经在使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|896763|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);
++});
});|code-block|syntax|javascript|896764|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In case you are already using jQuery:</p>

<pre><code>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);
  });
});
</code></pre>


blocks|key|897445|text|所有这些解决方案要么在微小的鼠标移动中崩溃，要么过于复杂。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|897446|下面是一个使用两个事件侦听器的简单、可适应的解决方案。增量是您必须在up和down事件之间水平或垂直移动的像素距离，以便代码将其分类为拖动而不是单击。这是因为有时您会在抬起鼠标或手指之前将其移动几个像素。|897447|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!
++}
});|code-block|syntax|javascript|897448|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>All these solutions either break on tiny mouse movements, or are overcomplicated.</p>

<p>Here is a simple adaptable solution using two event listeners. Delta is the distance in pixels that you must move horizontally or vertically between the up and down events for the code to classify it as a drag rather than a click. This is because sometimes you will move the mouse or your finger a few pixels before lifting it.</p>

<pre class="lang-js prettyprint-override"><code>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 &lt; delta &amp;&amp; diffY &lt; delta) {
    // Click!
  }
});
</code></pre>


blocks|key|896953|text|这应该可以很好地工作。类似于接受的答案(尽管使用jQuery)，但只有在新鼠标位置与mousedown事件上的位置不同时，才会重置isDragging标志。与公认的答案不同，这在最新版本的Chrome上有效，无论鼠标是否移动，都会触发mousemove。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|896954|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+=+[];
++++});|code-block|syntax|javascript|896955|如果您想添加一点公差(即，将微小的移动视为单击，而不是拖动)，您也可以在mousemove中调整坐标检查。|896956|entityMap^0|16|9|1T|A|39|9|0|0|10|9|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>This should work well. Similar to the accepted answer (though using jQuery), but the <code>isDragging</code> flag is only reset if the new mouse position differs from that on <code>mousedown</code> event. Unlike the accepted answer, that works on recent versions of Chrome, where <code>mousemove</code> is fired regardless of whether mouse was moved or not.</p>

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

<p>You may also adjust the coordinate check in <code>mousemove</code> if you want to add a little bit of tolerance (i.e. treat tiny movements as clicks, not drags).</p>


blocks|key|680358|text|如果您想使用Rxjs|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|680359|​|680360|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");
++});|code-block|syntax|javascript|680361|<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>|680362|680363|这是@wong2在他的答案中所做的直接克隆，但转换为RxJ。|680364|sample的用法也很有趣。sample运算符将从源(+mousedown和mousemove的merge+)获取最新值，并在内部可观察对象(mouseup)发出时发出该值。|style|CODE|680365|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ReactiveX/rxjs|1|http://rxmarbles.com/#sample^0|6|4|0|0|0|0|0|0|0|0|6|E|6|S|9|12|9|1C|5|1Z|7|0|6|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|1A|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1B|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1C|8|@$A|1D|B|1E|R|S]|$A|1F|B|1G|R|S]|$A|1H|B|1I|R|S]|$A|1J|B|1K|R|S]|$A|1L|B|1M|R|S]|$A|1N|B|1O|R|S]]|9|@$A|1P|B|1Q|1|1R]]|C|$]]|$1|T|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]|11|$5|W|X|Y|C|$Z|12]]]]

<h3>If you feel like using <a href="https://github.com/ReactiveX/rxjs" rel="noreferrer">Rxjs</a>:</h3>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
      console.clear();
      console.log(flag ? "drag" : "click");
  });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/@reactivex/rxjs@5.4.1/dist/global/Rx.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>This is a direct clone of what @wong2 did in his answer, but converted to RxJs.</p>

<p>Also interesting use of <a href="http://rxmarbles.com/#sample" rel="noreferrer"><code>sample</code></a>. The <code>sample</code> operator will take the latest value from the source (the <code>merge</code> of <code>mousedown</code> and <code>mousemove</code>) and emit it when the inner observable (<code>mouseup</code>) emits.</p>


blocks|key|896836|text|正如mrjrdnthms在他对公认答案的评论中指出的那样，这在Chrome上不再起作用(它总是会触发鼠标移动)，我已经修改了Gustavo的答案(因为我正在使用jQuery)来解决Chrome的行为。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|896837|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);

++});

});|code-block|syntax|javascript|896838|Array.prototype.equals函数来自此answer|offset|length|style|CODE|896839|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/14853974/187126^0|0|0|0|M|R|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>As mrjrdnthms points out in his comment on the accepted answer, this no longer works on Chrome (it always fires the mousemove), I've adapted Gustavo's answer (since I'm using jQuery) to address the Chrome behavior.</p>

<pre><code>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);

  });

});
</code></pre>

<p>The <code>Array.prototype.equals</code> function comes from this <a href="https://stackoverflow.com/a/14853974/187126">answer</a></p>


blocks|key|897037|text|使用x/y为5像素的jQuery来检测拖动：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|897038|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+%7C%7C+Math.abs(y+-+e.screenY)+>+5)+{
++++++dragging+=+true;
++++}
++});
});
$("body").on("mouseup",+function(e)+{
++$("body").off("mousemove");
++console.log(dragging+?+"drag"+:+"click");
});|code-block|syntax|javascript|897039|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Using jQuery with a 5 pixel x/y theshold to detect the drag:</p>

<pre><code>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) &gt; 5 || Math.abs(y - e.screenY) &gt; 5) {
      dragging = true;
    }
  });
});
$("body").on("mouseup", function(e) {
  $("body").off("mousemove");
  console.log(dragging ? "drag" : "click");
});
</code></pre>


blocks|key|680256|text|如果只是为了过滤掉拖动情况，可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|680257|var+moved+=+false;
$(selector)
++.mousedown(function()+{moved+=+false;})
++.mousemove(function()+{moved+=+true;})
++.mouseup(function(event)+{
++++if+(!moved)+{
++++++++//+clicked+without+moving+mouse
++++}
++});|code-block|syntax|javascript|680258|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If just to filter out the drag case, do it like this:</p>

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


blocks|key|680830|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|680831|​|680832|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)
++}
})|code-block|syntax|javascript|680833|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;
}|680834|<html>
++<body>
++++<div+id="div">Click+me+or+drag+me.</div>
++</body>
</html>|680835|680836|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You could do this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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)
  }
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
    &lt;div id="div"&gt;Click me or drag me.&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|897687|text|我最近在树形列表中遇到了同样的问题，用户可以单击或拖动它，创建了这个小Pointer类并将其放入我的utils.js中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|897688|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;
++++}
++}
}|code-block|syntax|javascript|897689|在这里你可以在工作中看到它：|897690|​|897691|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)
})|897692|897693|entityMap^0|Z|7|1E|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|10|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|Q|3|N|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p>Had the same problem recently with a tree list where the user can either click on the item or drag it, made this small <code>Pointer</code> class and put it in my <code>utils.js</code></p>
<pre class="lang-js prettyprint-override"><code>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 &lt; threshold &amp;&amp; deltaY &lt; threshold;
    }
  }
}
</code></pre>
<p>Here you can see it at work:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; threshold &amp;&amp; deltaY &lt; threshold;
    }
  }
}

const pointer = new Pointer();

window.addEventListener('mousedown', (e) =&gt; pointer.start(e))
//window.addEventListener('mousemove', (e) =&gt; pointer.last(e))
window.addEventListener('mouseup', (e) =&gt; {
  const operation = pointer.isClick(e) 
    ? "Click"
    : "Drag"
  console.log(operation)
})</code></pre>
</div>
</div>
</p>


blocks|key|680485|text|使用DeltaX和DeltaY的纯JS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|680486|此DeltaX和DeltaY由comment在接受的答案中建议，以避免尝试单击时的令人沮丧的体验，并获得拖动操作，而不是由于一个滴答鼠标移动。|offset|length|680487|++++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)+%7C%7C+(diffX+<+-deltaX)
++++++++++++++++++++%7C%7C+
++++++++++++++++++++(diffY+>+deltaY)+%7C%7C+(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);|code-block|syntax|javascript|680488|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/6042202/how-to-distinguish-mouse-click-and-drag#comment13767593_6042235^0|0|F|7|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<h2>Pure JS with DeltaX and DeltaY</h2>

<p>This DeltaX and DeltaY as suggested by a <a href="https://stackoverflow.com/questions/6042202/how-to-distinguish-mouse-click-and-drag#comment13767593_6042235">comment</a> in the accepted answer to avoid the frustrating experience when trying to click and get a drag operation instead due to a one tick mousemove.</p>

<pre><code>    deltaX = deltaY = 2;//px
    var element = document.getElementById('divID');
    element.addEventListener("mousedown", function(e){
        if (typeof InitPageX == 'undefined' &amp;&amp; typeof InitPageY == 'undefined') {
            InitPageX = e.pageX;
            InitPageY = e.pageY;
        }

    }, false);
    element.addEventListener("mousemove", function(e){
        if (typeof InitPageX !== 'undefined' &amp;&amp; typeof InitPageY !== 'undefined') {
            diffX = e.pageX - InitPageX;
            diffY = e.pageY - InitPageY;
            if (    (diffX &gt; deltaX) || (diffX &lt; -deltaX)
                    || 
                    (diffY &gt; deltaY) || (diffY &lt; -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);
</code></pre>


blocks|key|680582|text|对于OSM地图上的公共操作(点击时放置标记)，问题是:+1)如何确定鼠标按下->向上的持续时间(您无法想象每次单击都会创建一个新的标记)；2)鼠标在向下->向上移动(即用户正在拖动地图)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|680583|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+=+'%2BposX+%2B+',+'+%2B+posY%2B'\nUp+=+'%2BendX+%2B+',+'+%2B+endY%2B+'\nAction+=+'%2B+action);++++

}|code-block|syntax|javascript|680584|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For a public action on an OSM map (position a marker on click) the question was: 1) how to determine the duration of mouse down->up (you can't imagine creating a new marker for each click) and 2) did the mouse move during down->up (i.e user is dragging the map). </p>

<pre><code>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 &gt; 0.5 &amp;&amp; t2 &lt; 1.5) { // Fixing duration of mouse down-&gt;up

      if( Math.abs( posX-endX ) &lt; 5 &amp;&amp; Math.abs( posY-endY ) &lt; 5 ) { // 5px error on mouse pos while clicking
         action = 'active';
         // --------&gt; Do something
      }
  }
  console.log('Down = '+posX + ', ' + posY+'\nUp = '+endX + ', ' + endY+ '\nAction = '+ action);    

}
</code></pre>


blocks|key|680851|text|基于this+answer，我在我的React组件中这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|680852|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}+/>
++++);
})|code-block|syntax|javascript|680853|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/63973098/2891356^0|2|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Based on <a href="https://stackoverflow.com/a/63973098/2891356">this</a> answer, I did this in my React component:</p>
<pre><code>export default React.memo(() =&gt; {
    const containerRef = React.useRef(null);

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

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

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

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

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

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


blocks|key|897503|text|如果您想要检查特定元素的单击或拖动行为，您可以在不听取正文的情况下执行此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|897504|​|897505|$(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');
++++}
++});
});|code-block|syntax|javascript|897506|.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;
}|897507|<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>|897508|897509|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>If you want check the click or drag behavior of a specific element you can do this without having to listen to the body.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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');
    }
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /&gt;
&lt;div class="content"&gt;
  &lt;div class="slider"&gt;
    &lt;div class="owl-carousel owl-theme"&gt;
      &lt;div class="item"&gt;
        &lt;a href="#" class="btn" draggable="true"&gt;click me without moving the mouse&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;a href="#" class="btn" draggable="true"&gt;click me without moving the mouse&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="result"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|897572|text|根据@Przemek的回答，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|897573|​|897574|function+listenClickOnly(element,+callback,+threshold=10)+{
++let+drag+=+0;
++element.addEventListener('mousedown',+()+=>+drag+=+0);
++element.addEventListener('mousemove',+()+=>+drag%2B%2B);
++element.addEventListener('mouseup',+e+=>+{
++++if+(drag<threshold)+callback(e);
++});
}

listenClickOnly(
++document,
++()+=>+console.log('click'),
++10
);|code-block|syntax|javascript|897575|897576|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>from @Przemek 's answer,</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function listenClickOnly(element, callback, threshold=10) {
  let drag = 0;
  element.addEventListener('mousedown', () =&gt; drag = 0);
  element.addEventListener('mousemove', () =&gt; drag++);
  element.addEventListener('mouseup', e =&gt; {
    if (drag&lt;threshold) callback(e);
  });
}

listenClickOnly(
  document,
  () =&gt; console.log('click'),
  10
);</code></pre>
</div>
</div>
</p>


<p>I use <code>jQuery.click</code> to handle the mouse click event on Raphael graph, meanwhile, I need to handle mouse <code>drag</code> event, mouse drag consists of <code>mousedown</code>, <code>mouseup</code>and <code>mousemove</code> in Raphael. </p>

<p>It is difficult to distinguish <code>click</code> and <code>drag</code> because <code>click</code> also contain <code>mousedown</code> &amp; <code>mouseup</code>, How can I distinguish mouse "click" &amp; mouse "drag" then in Javascript?</p>


How to distinguish mouse "click" and "drag"

我使用jQuery.click来处理拉斐尔图形上的鼠标点击事件，同时，我需要处理鼠标的drag事件，鼠标拖动由拉斐尔中的mousedown、mouseup和mousemove组成。很难区分click和drag，因为click也包含mousedown和mouseup，我如何在Javascript中区分鼠标“点击”和鼠标“拖动”呢？

问如何区分鼠标的“单击”和“拖动”
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何区分鼠标的“单击”和“拖动”EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何区分鼠标的“单击”和“拖动”
EN