防止鼠标向上的单击事件和单击时的鼠标向上事件

Question

我已经创建了一个拖动栏，它将在拖动时增加和减少容器宽度，单击它将收缩/展开。但是每当我试图拖动它的时候，点击事件就会触发，拖拽条就会收缩。我正在使用backbone.js并使用下面的代码。

events: {
    'click .sideNavBar': 'toggleHeadersSection',
    'mousedown #dragBar': 'increaseDragBarWidth',
    'mouseup #dragBar': 'decreaseDragBarWidth',
    'click #dragBar': 'toggleHeadersSection',
},

increaseDragBarWidth: function (event){
    $(document).mousemove(function(event){
        $('.clinical-data-accordion').css("width",event.pageX+2);
    });

},

decreaseDragBarWidth: function (event){
    $(document).unbind('mousemove');
},
toggleHeadersSection: function(event){
       let clinicalDetailSection = this.$el.find("#clinicalDetailSection");
       let isHidden = $(clinicalDetailSection).hasClass('isHidden');
       this.displayHeadersSection(isHidden);
   
},

Answer 1

这是一个包含一些图像的JSFiddle，您可以拖动并单击这些图像。(它是纯js)

通过检查鼠标按下事件和向上事件的时间差，可以将单击与拖动分开。

let timeDelta;

function startDrag(e) { // mouse up
    timeDelta = Date.now(); // get current millis
    ...

function stopDrag() { // mouse down
    if (typeof drag == "undefined") return;

    if (drag) {
        if (Date.now() - timeDelta > 150) { // we dragged
    ...

如果按住鼠标超过150ms，则不会将其计入单击。如果您将该检查添加到单击事件，则它应该可以工作。