/mouseup防止单击

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事件的my列的宽度，它工作得很好。但是我的<th>-elements上也有一个点击事件。问题是，当我仍然在<th>上释放鼠标时，<th>触发器的单击事件仍然存在。

我试过几件事：

• stopPropagation()对几乎所有的事件都有
• 在mousedown事件中返回false
• 在mousedown中解除click事件，并在mouseup事件中再次绑定它。

还有其他方法来防止单击事件吗？

编辑：，我仍然希望将单击事件保留在<th>上，但是我不希望它在我拖动之后启动。

Answer 1

你试过吗

event.stopImmediatePropagation(); 

这将调用stopPropagation，但也会阻止同一元素中的其他处理程序接收事件。

http://api.jquery.com/event.stopimmediatepropagation/

Answer 2

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

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