簡體   English   中英

更改<a>標記行為的正確方法是什么?

[英]What is the right way to change the behavior of an <a> tag?

我想通過onclick事件進行鏈接調用Javascript函數,而不做任何其他事情(按照鏈接)。 最好的方法是什么? 我經常這樣做:

<a href="#" onclick="foo()">Click</a>

但我不確定這是最好的方法,在這種情況下,它導航到page.html#,這對我正在做的事情並不好。

通常,您應始終使用后備鏈接以確保禁用JavaScript的客戶端仍具有某些功能。 這個概念被稱為不引人注目的JavaScript。 示例...假設您有以下搜索鏈接:

<a href="search.php" id="searchLink">Search</a>

您始終可以執行以下操作:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

這樣,禁用javascript的用戶將被定向到search.php,而使用JavaScript的查看者會查看您的增強功能。

編輯:正如nickf在評論#2中指出的那樣,如果處理程序中存在錯誤,則try和catch將阻止鏈接跟隨。

只需確保從onclick處理程序返回false 例如, foo()應定義為:

function foo() {
  // ... do stuff
  return false;
}

有人在評論中指出,您可能需要稍微更改HTML以使其正常工作:

<a href="#" onclick="return foo()">Click</a>

或者只是把它放在HTML中:

<a href="#" onclick="foo(); return false;">Click</a>

首先,有兩種方法可以設置href - 你可以像上面所說的那樣用href引用'#',或者你可以將href設置為引用“javascript:;”

其次,我總是建議將JavaScript保存在外部文件中,然后在那里管理事件處理程序。 假設你想在頁面加載時設置它,你可以這樣做:

window.onload = {
    var myLink = document.getElementById('myLinkID');
    myLink.onclick = function(evt) {
        var evt = (evt) ? evt : ((event) ? event : null); // for cross-browser issues
        evt.preventDefault();
        evt.stopPropagation();
        foo();
    }
}

href="#"的問題在於它會將瀏覽器拋到頁面頂部。 你可以做:

<a href="javascript:foo()">clicky</a>

雖然更多人建議不要這樣做(分層)。 更好的方法,使用Prototype (就像在JQuery中一樣簡單,等等):

<a id="foo" href="#">clicky</a>

$('foo').observe('click', function(evt) { 
  foo();
  evt.stop(); // keeps it from navigating to the href url
}); 
<a href="javascript: foo()" >Click</a>

調用foo()后返回false

很多混淆是圍繞使用a-tags,因為它們跨瀏覽器支持:hover偽css-selector ...

因此,使用a-tag通常很明顯,因為它會根據鼠標懸停的不同階段進行不同的渲染...

有人會聲稱內置於:hover偽標簽的功能根本不可用,因為W3C的目的是在動態html的三個部分中分離內容,視覺呈現和功能; HTML,CSS和JavaScript。

但是現在我們仍然堅持使用它,暫時可以通過很多方式使用a-tags,因為它們以簡單的方式完成任務,並且它是正確的跨瀏覽器! - )

但這意味着您有時必須禁用這些鏈接標記的默認行為,這意味着當更改當前文檔的內容沒有意義時,必須使onclick-event返回false。 。

但是,可以使用解除默認行為的非常好的示例,例如,即使用戶已禁用javascript,也可以提供具有某些屬性的彈出窗口:

<a href="http://en.wikipedia.org/wiki/Css" target="_blank" onclick="window.open(this.href,'_blank','width=600,height=450,status=no');return false;">Show wikipedia css</a>

小心使用

<a href="#">Click</a>

因為它可能導致令人討厭的IE6問題

我總是建議使用一個沒有任何意義的錨。 我喜歡用這個

<a href="#MAGIC">Click</a>

因為它讓我發笑

如果你包括

return false;

從onclick事件,然后頁面將根本不加載。 例如:

<a href="#" onclick="foo();return false;">Click</a>

或者在函數本身中:

function foo() {
  // other stuff
  return false;
}

設置href屬性以執行javascript。 像這樣:

<a href="javascript:foo()">Click</a>

這樣你的所有a:懸停CSS樣式都按預期工作。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM