我正在使用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被拖动和调整大小时被取消选择?感谢您的帮助。提前致谢。
你是男人。谢谢你,先生。似乎很明显。 – naivedeveloper 2011-04-19 00:44:11
@ user301302 - 不客气! :) – 2011-04-19 03:06:10
谢谢你,先生! – oodavid 2016-09-23 16:16:07