A内的跨度（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

你可能需要在这里使用一些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事件：

1. 您点击跨度
2. 跨度点击事件代码运行
3. 跨度点击代码完成，因此事件“泡沫”链向上到父容器
4. 父容器（锚标记）激活，所以您运行click事件（打开HREF的页面）

要停止这一点，有一个称为012的有用函数，这将停止冒泡。

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>