javascript - A 内的 SPAN (HREF)

Question

我有一个跨度，它具有在 ONCLICK 上显示 DIV 的功能，但它在 A（HREF）内，单击执行该功能，并且在进入站点 A（HREF）后不久，无法单击 SPAN，执行功能，而不是去A（HREF）的页面？

<a class="style" href="http://stackoverflow.com/">
    <span onclick="javascript:display('div1');">\/</span>
    Stack Overflow
</a>

抱歉英语不好。

Answer 1

这里发生的是你正在处理事件冒泡。基本上，当您单击跨度时，您会触发 onClick 事件，然后它就会运行。但是因为跨度在一个锚标签内，你也会触发锚的 onClick 事件：

1. 你点击跨度
2. 跨度点击事件代码运行
3. 跨度点击代码完成，因此事件“冒泡”链到父容器
4. 父容器（锚标记）激活，因此您运行该单击事件（打开 href 的页面）

为了阻止这种情况，有一个有用的函数叫做preventDefault，它将停止冒泡。

在一个 javascript 文件中

var onClick=function(event){
        //do your code stuff here
        display('div1');
        //then stop the bubbling
        event.preventDefault(); //anchor event won't trigger!
}

然后在您的 HTML 中：

<span onclick="onClick(event)">\/</span>

Answer 2

您可能需要在这里使用一些 jQuery 魔法。

<a class="style" href="http://stackoverflow.com/">
    <span id="inner-button">\/</span>
    Stack Overflow
</a>

用js：

$('a').click(function(e) {
    if (e.target.id == 'inner-button') {
      // Display div.

      e.preventDefault();
    }
});