拖动后取消点击

我有这样的拖动事件

$('.dragDiv').draggable({
    start:function(event,ui){
    },
    stop:function(event,ui){
        
    }
})
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="background-color:yellow;width:100px;height:100px;" class='dragDiv'>
<a onclick='console.log("clicked");'>test</a>
</div>

In this case, dragDiv has the link 'test' inside.

If you drag the div by grabbing test link.

链接在拖动后触发。

我想在拖动后取消触发链接。

我该怎么做?

评论
此1不2
此1不2

您可以将一个类添加到拖动的元素中,然后在click事件处理程序中检查该元素是否具有该类,但是如您所见,我必须添加超时功能,因为单击将在拖动完成后排队并执行,因此不确定如果有更好的方法:

$('.dragDiv').draggable({
    start:function(event,ui){
      $('.dragDiv').addClass('disable-click')
    },
    stop:function(event,ui){
      setTimeout(() => {
        $('.dragDiv').removeClass('disable-click')  
      }, 100);
    }
})
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="background-color:yellow;width:100px;height:100px;" class='dragDiv'>
<a onclick='if(!this.parentElement.classList.contains("disable-click")) {console.log("clicked");}'>test</a>
</div>
点赞
评论