X-Editable：停止传播“点击编辑”答案

【问题标题】：X-Editable: stop propagation on "click to edit"X-Editable：停止传播“点击编辑”
【发布时间】：2013-10-02 13:15:15
【问题描述】：

我在 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 ...
  }
})

【问题讨论】：

标签： javascript jquery x-editable

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这不是很漂亮，但我们通过以下方式解决了这个问题：

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

我们仍在寻找不需要特定标签名列表的解决方案，这些标签名可以点击。

【讨论】：