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

Question

这就是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 (在文本上)时，事件会被触发一次，当我单击链接(按钮上的文本旁边)时，它会被触发两次。

我该怎么解决这个问题？

Answer 1

您的代码应该是：

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

Answer 2

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

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