jQuery UI - 我如何區分拖動/調整大小開始事件和點擊事件？

我有3個獨立的代碼塊，我想要執行。jQuery UI - 我如何區分拖動/調整大小開始事件和點擊事件？

一個是要執行，當用戶開始拖動的元素（我知道該怎麼做，使用可拖動開始事件）

另一種是當用戶開始調整的元素（我知道如何那麼使用可調整大小的開始事件）

第三個是當用戶只需單擊該元素（無意拖動它或調整其大小）。我如何檢測？

是否jQuery用戶界面這樣做提供了一種標準的方式，或者這是不夠好：

$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); 
    });

以上是不是很可靠實際上，作爲我的單擊事件似乎當拖動動作停下來也火了（因爲click事件上註冊的鼠標鬆開......）

來源

2016-02-28 Sprout Coder

我只是測試你的代碼在[小提琴]（https://jsfiddle.net/yassarikhan786/ewwjLooe/）和Click事件不會當拖動動作停止時觸發。 – Yass

已經有當拖動或調整添加類。你可以使用這些類和委託事件來簡化你的邏輯。像這樣的例子：

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

來源

2016-02-28 20:07:06

jQuery UI - 我如何區分拖動/調整大小開始事件和點擊事件？

回答

相關問題