X-Editable:停止传播“点击编辑”

时间:2013-10-02 13:15:16

标签: javascript jquery x-editable

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

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

在lightswitch05回答后编辑

我有多个动态DIV,应该可以选择,所以我不能使用全局变量。我在.editable-click锚点添加了一个属性,而不是改为。

editable-active用于了解弹出窗口是否打开

使用

editable-activateable来了解该.editable-click锚是否应该被视为

$(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 ...
  }
})

2 个答案:

答案 0 :(得分:3)

点击链接,只需抓住点击事件并停止:

$("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

答案 1 :(得分:1)

它不漂亮,但我们解决了这个问题:

$('.some-class').click(function(event) {
  if(event.target.tagName === "A" || event.target.tagName === "INPUT" || event.target.tagName === "BUTTON"){
    return;
  }

我们仍在寻找一种解决方案,该解决方案不需要可以点击的特定tagNames列表。