![](/img/trans.png)
[英]What is the right way to handle asynchronous behavior on Meteor's client side?
[英]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.