從通過Javascript

Question

執行預防HREF在

所以我在我的HTML這下面的代碼：

<li class="" id="toolbar_section"><a id="toolbar_section_child" href="#foobar" onclick="return toolbarSetSection(this);" data-toggle="checkpoint">foobar</a></li> 

而且寫在我的JavaScript是：

<script type="text/javascript"> 
    function toolbarSetSection(event){ 
     //some logic which leads to 
     return false; 
    }; 
</script> 

然而，在href仍執行。 ..我已經檢查了很多類似的話題，如event.preventDefault（）;但他們也不幫助我。

Answer 1

在您的HTML中，您應該將onclick="return toolbarSetSection(this);"更改爲onclick="toolbarSetSection(event);"，然後在您的JavaScript函數中有event.preventDefault();。

你完整的代碼是：

<li class="" id="toolbar_section"><a id="toolbar_section_child" href="#foobar" onclick="toolbarSetSection(event);" data-toggle="checkpoint">foobar</a></li> 

和

function toolbarSetSection(event) { 
    event.preventDefault(); 
    return false; 
}; 

Answer 2

return false通常應該可以工作，但也許在您的toolbarSetSection函數中有錯誤。

調用event.preventDefault()通常也應該有效。但是，對於您的情況，您希望以event作爲第一個參數調用函數，而HTML代碼將第一個參數作爲鏈接對象調用onclick="return toolbarSetSection(this);"。也許你想打電話toolbarSetSection(event);。

Answer 3

一個更好的方式來獲得預期的行爲，而不在標籤上

<script> 
document.getElementById('toolbar_section_child').on('click', function(e){ 
    e.preventDefault(); 
}) 
</script> 

加入onclick假設你有一個uniqueid for a標籤。

編輯 用於動態創建的元素使用事件代表團

document.addEventListener('click',function(e){ 
    /* 
    if(e.target && e.target.id == 'toolbar_section_child'){ 
     e.preventDefault(); 
    } 
    */ 
    // using a common class name 
    if(e.target && e.target.className.split(" ").indexOf("toolbar_section_child") != -1){ 
     e.preventDefault(); 
    } 
}) 

Answer 4

HTML

<ul> 
<li class="" id="toolbar_section2"><a id="toolbar_section_child" href="#" onclick="toolbarSetSection()" data-toggle="checkpoint">foobar</a></li> 
</ul> 

JS

function toolbarSetSection() 
{ 
alert('started'); 
event.preventDefault(); 
alert('weee'); 
} 

的jsfiddle所以你不能說這是不工作:)： https://jsfiddle.net/rgoopw18/1/