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

拖动或调整大小时，已添加了类。您可以使用这些类和委派事件来简化您的逻辑。像这样举例如：

$('#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>"

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

1 个答案: