拖动后取消点击

由 发布于 javascriptjqueryhtml
 收藏

我有这样的拖动事件

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