拖动后取消点击

我有这样的拖动事件

$('.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>