Question

我有一个带有在ONCLICK上显示DIV的功能的span，但是它在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

你可能需要在这里使用一些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();
    }
});

Answer 2

这里发生的事情是你正在处理event bubbling。基本上，当您单击跨度时，会触发onClick事件，并且它会运行。但由于跨度位于锚标记内，因此您还将触发锚点的onClick事件：

您点击了跨度
跨度点击事件代码运行
跨度点击代码完成，因此事件将链条“气泡”到父容器
父容器（锚标记）激活，因此您运行该click事件（打开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>

A中的SPAN（HREF）

2 个答案: