首先附加可拖动事件，然后附加单击事件：

$(function(){
    $('div').draggable();
    $('div').click(function(){
        $(this).toggleClass('orange');
    });
});

在这里试试：http://jsfiddle.net/aG72R/55/

使用ES6类（无jQuery）

要在javascript中实现这一点，而不需要jQuery的帮助，您可以添加和删除事件处理程序。
首先创建将在事件侦听器中添加和删除的函数

flagged () {
    this.isScrolled = true;
}

而这个用来停止一个事件上的所有事件

preventClick (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
}

然后，在mousedown和mousemove事件相继触发时添加该标志。

element.addEventListener('mousedown', () => {
    element.addEventListener('mousemove', flagged);
});

记住在鼠标向上时删除它，这样我们就不会在这个元素上重复大量的事件。

element.addEventListener('mouseup', () => {
    element.removeEventListener('mousemove', flagged);
});

最后，在元素的mouseup事件中，我们可以使用标记逻辑来添加和删除单击。

element.addEventListener('mouseup', (e) => {
    if (this.isScrolled) {
        e.target.addEventListener('click', preventClick);
    } else {
        e.target.removeEventListener('click', preventClick);
    }
    this.isScrolled = false;
    element.removeEventListener('mousemove', flagged);
});

在上面的例子中，我的目标是点击的真实的目标，所以如果这是一个滑块，我将目标图像，而不是主库element。要目标主要element只需改变添加/删除事件侦听器，如下所示。

element.addEventListener('mouseup', (e) => {
    if (this.isScrolled) {
        element.addEventListener('click', preventClick);
    } else {
        element.removeEventListener('click', preventClick);
    }
    this.isScrolled = false;
    element.removeEventListener('mousemove', flagged);
});

结论

通过将匿名函数设置为常量，我们就不必绑定它们了，而且这样它们就有了一个“句柄”，允许从事件中移除特定的函数，而不是事件中的整个函数集。

我用data和setTimeout做了一个解决方案。也许比助手类更好。

<div id="dragbox"></div>

以及

$(function(){
    $('#dragbox').bind('click', function(){
        if($(this).data('dragging')) return;
        $(this).toggleClass('orange');
    });

    $('#dragbox').draggable({
        start: function(event, ui){
            $(this).data('dragging', true);
        },
        stop: function(event, ui){
            setTimeout(function(){
                $(event.target).data('dragging', false);
            }, 1);
        }
    });
});

检查**fiddle**。

这应该行得通：

$(function(){

    $('div').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('div').click(function(event) {
    if ($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
        $(this).toggleClass('orange');
    }
});
});

DEMO

你可以不用jQuery UI拖拽就可以做到，只需要使用常见的'click'和'dragstart'事件：

$('div').on('dragstart', function (e) {
  e.preventDefault();
  $(this).data('dragging', true);
}).on('click', function (e) {
  if ($(this).data('dragging')) {
    e.preventDefault();
    $(this).data('dragging', false);
  }
});

你可以在draggable上检查jQuery UI的ui-draggable-dragging类，如果它在那里，就不要继续click事件，否则就继续。jQuery UI会处理这个类的设置和删除，所以你不必这样做。

代码：

$(function(){
    $('div').bind('click', function(){
        if( $(this).hasClass('ui-draggable-dragging') ) { return false; }
        $(this).toggleClass('orange');
    });

    $('div').draggable();
});

带React

此代码适用于React用户，在鼠标释放时检查draggedRef。
我没有使用单击事件。单击事件由鼠标释放事件检查。

const draggedRef = useRef(false);

...

<button
  type="button"
  onMouseDown={() => (draggedRef.current = false)}
  onMouseMove={() => (draggedRef.current = true)}
  onMouseUp={() => {
    if (draggedRef.current) return;

    setLayerOpened(!layerOpened);
  }}
>
  BTN
</button>

我遇到了同样的问题（p5.js），我通过一个全局lastDraggedAt变量解决了这个问题，该变量在拖动事件运行时更新，在单击事件中，我只是检查最后一次拖动是否小于0.1秒。

function mouseDragged() {
    // other code
    lastDraggedAt = Date.now();
}

function mouseClicked() {
    if (Date.now() - lastDraggedAt < 100)
        return; // its just firing due to a drag so ignore
    // other code
}