javascript - jQuery UI - 如何区分拖动/调整大小开始事件和单击事件？

Question

我想要执行 3 个独立的代码块。

其中一个是在用户开始拖动元素时执行(我知道如何使用可拖动开始事件来执行此操作)

另一个是当用户开始调整元素大小时(我知道如何使用可调整大小的开始事件来做到这一点)

第三个是当用户简单地单击元素时(没有意图拖动它或调整它的大小)。我如何检测到这一点？

jQuery UI 是否提供了执行此操作的标准方法，或者这是否足够好:

$el.resizable({
    start: function ()
    {
        $(this).addClass('animating');
    },
    stop: function (event,ui)
    {
         $(this).removeClass('animating');
    }
}).draggable({
    start: function ()
    {
        $(this).addClass('animating');
    },
    stop: function ()
    {
        $(this).removeClass('animating');
    }
}).click(function ()
   {
        var $this = $(this);
        setTimeout(function ()
        {
            if (!$this.hasClass('animating'))
            {
               console.log('simple click!');
            }
        }, 500);
    });

上面的内容实际上不太可靠，因为当拖动操作停止时我的点击事件似乎也会触发(因为点击事件是在 mouseup 上注册的......)

Answer 1

拖动或调整大小时已经添加了类。您可以使用这些类和委托(delegate)事件来简化您的逻辑。例如这样:

$('#element').resizable().draggable();
$(document).on('click', '#element:not(ui-draggable-dragging):not(ui-resizble-resizing)', function() {
  console.log('simple click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">


<div id="element" style="width: 100px; height: 100px; background-color: aquamarine;"></div>"