如何在可調整大小事件後取消點擊？

我正在使用JQuery UI可調整大小的插件來調整各種div的大小。考慮下面的HTML頁面（使用JS嵌入）：如何在可調整大小事件後取消點擊？

<html> 
<head></head> 
<body> 
<div id="site"> 
    <div>This element is resizable</div> 
    <br /> 
    <div style="width: 200px;">This is another resizable element</div> 
</div> 

<!-- javascript includes --> 
<script> 
$(function() { 
    $("#site div").click(function() { 

     console.log("Clicked");  
     if($(this).hasClass("selected")) { 
      $(this).removeClass("selected"); 
     } 
     else {  // Currently not selected, so let's select it   
      $(this).addClass("selected").resizable({ 
       start: function(event, ui) { 
        console.log("Start"); 
       }, 
       resize: function(event, ui) { 
        console.log("Resize"); 
       }, 
       stop: function(event, ui) { 
        console.log("Stop"); 
       } 
      }); 
     } 
    }); 
}); 
</script> 
</body> 
</html>

所以，我試圖在這個示例代碼中完成的工作非常簡單。當用戶點擊嵌套在「#site」中的div時，我想讓div變成「已選中」。所以，在這個例子中，當div的click事件被觸發時，名爲「selected」的CSS類將被添加到被點擊的div中。除了點擊div之外，用戶還可以調整div的大小。當用戶調整選定的div時會出現問題。顯然，當用戶首先選擇一個div時點擊事件觸發，但是當用戶點擊並拖動div的邊緣來調整它的大小時也會觸發點擊事件。點擊事件將調用點擊例程並取消選擇div。這不是我想要發生的事情。點擊事件只有在所有可調整大小的事件觸發後纔會觸發。

因此，我的問題是，我如何處理這種情況，以允許用戶點擊並選擇div，但也允許div被調整大小，但不能在div被拖動和調整大小時被取消選擇？感謝您的幫助。提前致謝。

來源

2011-04-18 naivedeveloper

好問題。可調整大小是利用事件冒泡。實際調整大小手柄是可調整大小的內部元素。所以，檢查事件目標的類將會給你你需要的東西。

http://jsfiddle.net/bmvDs/1/

$('#test').click(function(e){ 
    if(!$(e.target).is('.ui-resizable-handle')) // not if it is the handle 
     $(this).toggleClass('selected'); 
}).resizable();

來源

2011-04-18 22:06:26

你是男人。謝謝你，先生。似乎很明顯。 – naivedeveloper 2011-04-19 00:44:11

@ user301302 - 不客氣！ :) – 2011-04-19 03:06:10

謝謝你，先生！ – oodavid 2016-09-23 16:16:07

一種選擇可能是設置你的所有從一開始就爲可調整大小的div和處理方式上點擊：

$(function() { 
    var resizables = $('#site div'); 
    resizables.resizable({ 

       start: function(event, ui) { 
        console.log("Start"); 

        // Remove the selected class from all other divs first 
        resizables.each(function(){ $(this).removeClass('selected'); }); 

        // Set this div as selected 
        ui.element.addClass('selected'); 
        // Carry on doing whatever else you want to do 

       }, 
       resize: function(event, ui) { 
        console.log("Resize"); 
       }, 
       stop: function(event, ui) { 
        console.log("Stop"); 
       } 

    }); 
});

來源

2011-04-18 21:56:21

jQuery的.one是你的朋友！這將允許用class .foo單擊每個元素。

$(".foo").one("click", function() { 
    alert("This will be displayed only once."); 
});

來源

2011-04-18 23:31:12 SickHippie

如何在可調整大小事件後取消點擊？

回答

相關問題