如何在可调整大小的事件后取消点击？
我正在利用 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 的单击事件时，名为“selected”的 CSS 类将添加到单击的 div 中。除了单击 div 之外，用户还可以调整 div 的大小。当用户调整所选 div 的大小时就会出现问题。显然，当用户首次选择 div 时会触发 click 事件，但当用户单击并拖动 div 边缘以调整其大小时也会触发 click 事件。单击事件将调用单击例程并取消选择 div。这不是我想要发生的事情。仅当所有可调整大小的事件触发后，才会触发单击事件。
有了这个，我的问题是，如何处理这种情况，以允许用户单击并选择 div，同时允许调整 div 大小，但在拖动 div 并调整大小时不取消选择？感谢您的帮助。提前致谢。
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>
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.
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
好问题。可调整大小正在利用事件冒泡。实际的调整大小手柄是可调整大小的内部元素。因此，检查事件目标的类将为您提供所需的内容。
http://jsfiddle.net/bmvDs/1/
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.
http://jsfiddle.net/bmvDs/1/
一种选择可能是从一开始就将所有 div 设置为可调整大小，并在单击时处理样式：
One option might be to set all your divs as resizable from the outset and handle the styles on click:
jQuery .one 是你的朋友！这将允许单击每个具有 .foo 类的元素。
jQuery .one is your friend! This will allow a single click on each element with class .foo.