gpt4 book ai didi

javascript - X-Editable:在 "click to edit"停止传播

转载 作者:行者123 更新时间:2023-11-29 18:20:35 27 4
gpt4 key购买 nike

我在 div 中有一个可编辑元素,它本身是可点击的。每当我单击 x-editable anchor 元素时,单击会在 DOM 中冒泡并触发对父 div 的单击。我怎样才能防止这种情况发生?我知道可以使用 jQuery 的 stopPropagation() 来停止它,但是我应该在哪里调用这个方法呢?

这是有问题的 JSFiddle:http://jsfiddle.net/4RZvV/ .要复制单击可编辑值,您会看到包含的 div 将捕获单击事件。当我单击 x-editable 弹出窗口的任意位置时也会发生这种情况,我也想阻止这种情况。

在 lightswitch05 回答后编辑

我有多个动态 DIV,它们应该是可选的,所以我不能使用全局变量。我向 .editable-click anchor 添加了一个属性,它被更改了。

editable-active 用于知道弹窗是否打开

editable-activateable 用于了解是否应按原样处理 .editable-click anchor

$(document).on('shown', "a.editable-click[editable-activateable]", function(e, reason) {
return $(this).attr("editable-active", true);
});

$(document).on('hidden', "a.editable-click[editable-activateable]", function(e, reason) {
return $(this).removeAttr("editable-active");
});

这张支票和你描述的很像

$(document).on("click", ".version", function() {
$this = $(this)

// Check that the xeditable popup is not open
if($this.find("a[editable-active]").length === 0) { // means that editable popup is not open so we can do the stuff
// ... do stuff ...
}
})

最佳答案

对于链接的点击,只需捕获点击事件并停止它:

$("a.editable-click").click(function(e){
e.stopPropagation();
});

X-editable 中的点击有点棘手。一种方法是在 X-editable 窗口是否打开时保存一个标志,并且只有在 X-editable 关闭时才采取行动

var editableActive = false;

$("a.editable-click").on('shown', function(e, reason) {
editableActive = true;
});

$("a.editable-click").on('hidden', function(e, reason) {
editableActive = false;
});

$("div.version").click(function(e) {
var $this;
$this = $(this);
if(editableActive === false){
if ($this.hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
}
});

Fixed Fiddle

关于javascript - X-Editable:在 "click to edit"停止传播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19137802/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com