很简单，

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

我认为区别在于，在拖拽中，mousedown和mouseup之间有一个鼠标移动，但在点击中没有。

你可以这样做:

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)

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

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

其实就是这么简单

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!! ")
})

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

试试吧。

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

纯JS与DeltaX和delay

这个DeltaX和delay是由接受的答案中的评论所建议的，以避免由于鼠标移动一划而试图单击并获得拖动操作时的令人沮丧的体验。

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

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

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