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>