如何在可resize的事件后取消点击？

我正在使用Jquery UI可resize的插件来调整各种div的大小。 考虑以下HTML页面（嵌入了JS）：

   
 
This element is resizable
 
 
This is another resizable element
 
   $(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"); } }); } }); });    

所以，我在这个示例代码中想要完成的事情非常简单。 当用户点击嵌套在“#site”中的div时，我希望div变为“已选中”。 因此，在此示例中，当触发div的click事件时，将将一个名为“selected”的CSS类添加到单击的div中。 除了单击div之外，用户还可以调整div的大小。 当用户调整所选div的大小时会出现问题。 显然，当用户第一次选择div时会触发click事件，但是当用户单击并拖动div的边缘以调整其大小时，也会触发click事件。 click事件将调用click例程并取消选择div。 这不是我想要发生的事情。 只有在所有可resize的事件都被触发后才会触发click事件。

有了这个，我的问题是，如何处理这种情况以允许用户单击并选择div，还允许调整div的大小，但在拖动和调整div的大小时不取消选择？ 感谢您的帮助。 提前致谢。

Answer 1

好问题。 可resize是利用事件冒泡。 实际的resize句柄是可resize的内部元素。 因此，检查事件目标的类将为您提供所需的内容。

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(); 

Answer 2

一个选项可能是将所有div设置为从一开始就可resize并在点击时处理样式：

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

Answer 3

jQuery .one是你的朋友！ 这将允许单击带有.foo类的每个元素。

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