防止 mouseup 上的 click 事件和 Click 上的 mouseup 事件答案

【问题标题】：Prevent click event on mouseup and mouseup event on Click防止 mouseup 上的 click 事件和 Click 上的 mouseup 事件
【发布时间】：2021-09-29 05:21:46
【问题描述】：

我创建了一个拖动条，它会在拖动时增加和减小容器宽度，点击时它会收缩/展开。但是每当我试图拖动它时，点击事件就会触发并且拖动条正在收缩。我正在使用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);
   
},

【问题讨论】：

标签： javascript jquery backbone.js backbone-events

【解决方案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
    ...

如果您按住鼠标超过 150 毫秒，则不算作点击。如果您将该检查添加到您的点击事件中，它应该可以工作。

【讨论】：