如何将事件绑定到元素和所有子元素但只触发一次？答案

【问题标题】：How to bind event to element and all children but only ever trigger it once?如何将事件绑定到元素和所有子元素但只触发一次？
【发布时间】：2015-04-22 06:29:25
【问题描述】：

这就是 HTML 的样子：

<a href="#" id="back-button" data-transition="slide" data-direction="reverse" data-role="button">
  <div class="nav-item-desc">Back</div>
</a>

这是我绑定点击事件的方法：

$("#back-button").contents().addBack().off().on("click", function(e)
{
});

现在，当我单击 div（文本右侧）时，该事件被触发一次，当我单击链接（按钮上的文本旁边）时，它被触发两次。

我该如何解决这个问题？

【问题讨论】：

你为什么不在#back-button上绑定点击事件？？？当点击事件冒泡时，这不是问题。顺便说一句，您仍然可以使用 event.target 过滤特定的点击元素
事件在 DOM 中冒泡，所以.contents().addBack() 是多余的。
奇怪，我明确地添加了 .contents().addBack() 因为当我点击文本旁边时事件没有触发。现在突然触发...

标签： javascript jquery events jquery-mobile

【解决方案1】：

你的代码应该是：

$("#back-button").on("click", function(e){
    // e.target is the specific clicked element
});

【讨论】：

【解决方案2】：

看看http://api.jquery.com/one/

$("#back-button").contents().addBack().off().one("click", function(e){});

【讨论】：