问题描述
我正在使用Jquery UI可调整大小的插件来调整各种div的大小。考虑以下HTML页面（嵌入JS）：
I am utilizing the Jquery UI resizable plugin in order to resize various div's. Consider the following HTML page (with JS embedded):
<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时会触发click事件，但当用户单击并拖动div的边缘以调整其大小时，也会触发click事件。 click事件将调用click例程并取消选择div。这不是我想要发生的事情。点击事件仅在所有可调整大小的事件都被触发后才会触发。
So, what I'm trying to accomplish in this sample code is pretty simple. When a user clicks on a div nested within "#site", I want the div to become "selected". So, in this example, when the click event for the div is fired, a CSS class called "selected" will be added to the clicked div. In addition to clicking the div, the user can resize the div. The problem arises when the user resizes the selected div. Obviously, a click event fires when the user first selects a div, but a click event also fires when the user clicks and drags the edges of the div to resize it. The click event will call the click routine and de-select the div. This is not what I want to happen. The click event fires only after all the resizable events have fired.
有了这个，我的问题是，如何处理这种情况以允许用户点击并选择div，但也允许div被调整大小，但是当div被拖动并调整大小时不会取消选择？非常感谢您的帮助。在此先感谢。
With that, my question is, how could I handle this scenario to allow the user to click and select the div, but also to allow the div to be resized, but not de-selected when the div is dragged and resized? Your help is appreciated. Thanks in advance.
推荐答案
好问题。可调整大小是利用事件冒泡。实际的调整大小句柄是可调整大小的内部元素。因此，检查事件目标的类将为您提供所需的内容。
Good question. Resizable is utilizing event bubbling. The actual resize handles are inner elements of your resizable. So, checking the class of the event target will give you what you need.
$('#test').click(function(e){
if(!$(e.target).is('.ui-resizable-handle')) // not if it is the handle
$(this).toggleClass('selected');
}).resizable();
这篇关于如何在可调整大小的事件后取消点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！