对于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);    

}

清洁ES2015

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

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

如果只是为了过滤掉拖动的情况，这样做:

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

来自@Przemek的回答，

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

如果您希望检查特定元素的单击或拖动行为，则无需监听主体即可执行此操作。

$(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>

另一个基于类的香草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也可以是document为global):

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);
}