Jquery mousedown/mouseup 阻止 click 事件

Question

我的页面建立方式如下：

<table>
    <thead>
        <tr>
            <th>
                  Test
                  <div class="drag"/>
            </th>
            <th>
              ......
              ......
            </th>
        </tr>
    </thead>
</table>

.drag {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: yellow;
    width: 3px;
}

意图是在 <div class="drag"/> 上使用 mousedown/mouseup 事件拖动列的宽度，这个方法运行良好。但是我的 <th> 元素上也有一个 click 事件。问题是，当我仍然按住鼠标在 <th> 上释放时，<th> 的 click 事件仍然会触发。

我尝试了几件事情：

• 在几乎每个事件上都使用 stopPropagation()
• 在 mousedown 事件中返回 false
• 在 mousedown 事件中解绑 click 事件，然后在 mouseup 事件中重新绑定

还有其他防止 click 事件的方法吗？

编辑: 我仍然希望在那个 <th> 上保留 click 事件，但我不想在拖动后触发它。

- Yukuza

---

请在您的代码中添加一个 mcve，以便我们可以看到它的工作情况（即使是使用虚拟操作）。目前，您没有显示任何脚本（问题只有脚本标签），而 CSS 与发布的 HTML 不匹配。 - Alvaro Montoro

Answer 1

您尝试过吗？(关于IT技术)

event.stopImmediatePropagation(); 

这将调用stopPropagation，但也防止同一元素内的其他处理程序接收事件。 http://api.jquery.com/event.stopimmediatepropagation/

- domitall

Answer 2

$('th').click(function(e){
    e.preventDefault();
}

- Josh Stevenson

---

即使用户没有拖放，这是否会停止所需的点击事件？ - Alvaro Montoro

嗯，是的。但他问道“还有其他方法可以防止点击事件吗？” - Josh Stevenson

我仍然想保留点击事件，但是当我尝试拖动时，我不希望它开始。 - Yukuza

我已经尝试了所有方法，现在我最终设置了一个短暂的超时，在其中将 var dragged 设置为 false，并在点击事件中进行检查。 - Yukuza

Answer 3

当拖动开始时（ondragstart），您可以设置一个标志变量，然后当它结束时（ondragend），您将取消设置它，并且onclick将被包装在一个if条件中，该条件将检查该标志。

像这样的东西（您需要根据自己的代码进行调整）：

var dragndrop = false;

$(".drag").on("dragstart", function(e) {
    dragndrop = true;
    // ...code here if needed...
});

$(".drag").on("dragend", function(e) {
    dragndrop = false;
    e.preventDefault();
    // ...code here if needed...
});

$("th").on("click", function() {
    if (!dragndrop) {
        // ... your code here 
    }
});

- Alvaro Montoro

---

我正在处理 mousedown 和 mouseup 事件。不幸的是，click 事件在 mouseup 之后开始，并且 dragndrop 变量被设置为 false :( - Yukuza

你尝试过将代码保留在 mousedown 和 mouseup 中，但添加 dragstart 和 dragend 仅用于设置/取消拖放标志吗？ - Alvaro Montoro