HTML锚点标签与斜体标签

Question

我有一些HTML代码。

<a href="#">
   <i class="some-bg" />
   Some Text
</a>

还有一些Javascript代码。

$("a").bind("touchstart", function (e) {
   e.preventDefault();

   console.log("Tag: " + e.target);
   console.log("Tag Name: " + e.target.tagName);
});

响应是什么。

Tag: [object HTMLElement]
Tag Name: I

为什么？难道不应该是锚点吗？ 更新

$("a, a *").bind(function() {
    e.stopPropagation();

    // other stuff
});

这个可以行吗？

- Umair A.

---

为什么不尝试使用<a class="some-bg" href="#">呢？ - jrummell

请记住，i、b和u并没有太多关于语义的含义。有更好的方法... - Erick Petrucelli

Answer 1

为什么？

因为您触摸了 <i> 元素（然后事件冒泡到了 <a> 元素）。

不应该是锚点吗？

不是。如果您想要获取绑定事件的元素而不是实际触发事件的元素，请使用 currentTarget。

- Quentin

---

如果我触摸“i”，事件会被触发两次吗？ - Umair A.

事件只会触发一次。它在<i>上发生，然后冒泡直到达到具有事件处理程序的<a>。该事件处理程序将被触发。由于您没有使用stopPropagation，它将继续冒泡，直到遇到一个处理程序或超过根元素。 - Quentin

嘿，我刚意识到问题所在。问题是因为“i”在“a”内部，而且大多数按钮空间都由“i”的背景图像占据，所以当我尝试触摸按钮时，如果我的手指正好在图像上而不是文本上方，处理程序就不会被触发。我该如何纠正这个问题？ - Umair A.

@Umair Ashraf — 嗯，你可以按照我在原始答案的最后一段所说的去做。 - Quentin

我能否使其处理在"a"元素或其任何子元素上的事件，但仅一次而不是多次？ - Umair A.

我能想到的是，在“a”上放置处理程序，然后在它的每个子元素上也放置处理程序，接着在处理函数内使用e.stopPropagation即可解决问题。我说得对吗？ - Umair A.