nai*_*per 3 jquery jquery-ui-resizable
我正在使用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时会触发click事件,但当用户单击并拖动div的边缘以调整其大小时,也会触发click事件.click事件将调用click例程并取消选择div.这不是我想要发生的事情.只有在所有可调整大小的事件都被触发后才会触发click事件.
有了这个,我的问题是,我怎么能处理这个场景以允许用户单击并选择div,还允许div调整大小,但在拖动和调整div的大小时不取消选择？非常感谢您的帮助.提前致谢.
好问题.可调整大小是利用事件冒泡.实际的调整大小句柄是可调整大小的内部元素.因此,检查事件目标的类将为您提供所需的内容.
$('#test').click(function(e){
if(!$(e.target).is('.ui-resizable-handle')) // not if it is the handle
$(this).toggleClass('selected');
}).resizable();