詳解Html a標(biāo)簽中href和onclick用法、區(qū)別、優(yōu)先級別
如果不設(shè)置 href屬性在IE6下面會不響應(yīng)hover。雙擊后會選中標(biāo)簽的父容器而非這個一a標(biāo)簽(IE下都存在這一問題)。
代碼如下
<a href="javascirpt:fn(this)"> <a onclick="fn(this)">
假定我們有個fn方法,需要取到這個元素,第一個方法傳入的this是空值。
所以,比較推薦的寫法是
代碼如下
<a href="javascript:void(0)" onclick="fn(this)">
下面代碼則執(zhí)行了subgo()函數(shù),
代碼如下
<a href="javascript:void(0)" onclick="subgo()">點(diǎn)我</a>
在這里,javascript:void(0),沒啟實(shí)質(zhì)上的作用,它僅僅是一個死鏈接,執(zhí)行的函數(shù)是subgo()。
代碼如下
<a onclick="subgo()">點(diǎn)我</a>與<a href="javascript:void(0)" onclick="subgo()">點(diǎn)我</a>區(qū)別。
實(shí)際上 #包含了一個位置信息默認(rèn)的錨是#top 也就是網(wǎng)頁的上端 ,而javascript:void(0) 僅僅表示一個死鏈接,沒有任何信息。所以調(diào)用腳本的時候最好用void(0)
href一般是指向一個URL地址,也可以調(diào)用javascript ,如href="javascript:xxx();",文檔中推薦這樣寫:
代碼如下
<a href="http://www.dhdzp.com/zhongxing/U880/ javascript:void(0)" onclick="xxx();">xx</a>
但是這種方法在復(fù)雜環(huán)境有時會產(chǎn)生奇怪的問題,盡量不要用javascript:協(xié)議做為A的href屬性,這樣不僅會導(dǎo)致不必要的觸發(fā)window.onbeforeunload事件,在IE里面更會使gif動畫圖片停止播放。
我們知道鏈接的 onclick 事件被先執(zhí)行,其次是 href 屬性下的動作(頁面跳轉(zhuǎn),或 javascript 偽鏈接),如果不想執(zhí)行href 屬性下的動作執(zhí)行,onclick 需要要返回 false ,一般是這樣寫onclick="xxx();return false;".
TabPane的JS源碼,由于onclick沒有返回FALSE,當(dāng)IFRMAE中關(guān)閉TABPANE時會導(dǎo)致href執(zhí)行,頁面顯示有問題。解決辦法就是將下面代碼復(fù)制到使用TAB的JSP中。
Html A標(biāo)簽中 href 和 onclick 同時使用的問題 優(yōu)先級別
1 順序
ie 6 : href 先觸發(fā) onclick 后觸發(fā)
其他瀏覽器 先觸發(fā)onlick 后觸發(fā) href
2 href="javascript: xxx()"
不能傳入this作為參數(shù)
onclick可以
代碼如下
<a href="javascript:alert('href event');" onclick="clickevent(this);">
3 優(yōu)先觸發(fā)的方法如果返回 false 導(dǎo)致后一個事件不被觸發(fā)
比如
代碼如下
<a href="javascript:alert('href event');" onclick="clickevent(this); return false;">
4
<a href="#"> 會導(dǎo)致頁面定位到書簽位置,
5
由于 1和 4 的原因
在ie6 下 同時有 <a href="#" 和 onclick的時候 由于頁面先因?yàn)閔ref重新載入了一次,導(dǎo)致 onclick事件被瀏覽器丟棄。
6 總結(jié):
1) 在不需要傳遞this作為方法的參數(shù)時候,推薦
只使用href="JavaScript: "
2) 如果需要使用this參數(shù),推薦
代碼如下
<a href="javascript:void(0);" onclick="doSomthing(this)" >
如下面一個列子。
我們需要A在第一次和第二次點(diǎn)擊的時候 訪問 href 第3次以后的就訪問另一個地址
代碼如下
var href=0
function clicka(obj)
{
if (href==2)
{
obj.;
}else
{
href++;
}
return true;
}
<a href="http://www.dhdzp.com/" target=_blank id="showa" onclick="clicka(this)"> 開屏高速下載 </a>
在a標(biāo)簽的href與onclick中使用javascript的區(qū)別
鏈接的 onclick 事件被先執(zhí)行,其次是 href 屬性下的動作(頁面跳轉(zhuǎn),或 javascript 偽鏈接);
假設(shè)鏈接中同時存在 href 與 onclick,如果想讓 href 屬性下的動作不執(zhí)行,onclick 必須得到一個 false 的返回值。不信,你可以將 goGoogle 函數(shù)中的 return false 注釋掉;
如果頁面過長有滾動條,且希望通過鏈接的 onclick 事件執(zhí)行操作。應(yīng)將它的 href 屬性設(shè)為 javascript:void(0);,而不要是 #,這可以防止不必要的頁面跳動;
如果在鏈接的 href 屬性中調(diào)用一個有返回值的函數(shù),當(dāng)前頁面的內(nèi)容將被此函數(shù)的返回值代替;
在按住Shift鍵的情況下會有所區(qū)別。
今天我遇到的問題,在IE6.0里以href的形式訪問不到parentNode。
盡量不要用javascript:協(xié)議做為A的href屬性,這樣不僅會導(dǎo)致不必要的觸發(fā)window.onbeforeunload事件,在IE里面更會使gif動畫圖片停止播放。
就這些,花了不少時間在這上面。
[緣由]
用CheckBoxList控件時想實(shí)現(xiàn)在每個checkbox后再加鏈接的功能,點(diǎn)鏈接實(shí)現(xiàn)一些功能之外,還要把checkbox選中。
代碼如下
<input type="checkbox" name="chk" id="chk"> <label for="chk">選中它<a onclick="this.parentNode.click();" style="border:solid 1px blue;">[label中的鏈接]</a></label>
最后用parentNode來實(shí)現(xiàn)的。
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
JavaScript類型系統(tǒng)之基本數(shù)據(jù)類型與包裝類型
javascript的數(shù)據(jù)類型可以分為兩種:原始類型和引用類型,在此文給大家提到。本文主要給大家介紹javascript類型系統(tǒng)之基本數(shù)據(jù)類型與包裝類型,涉及到j(luò)s 基本類型 包裝類相關(guān)知識,本文介紹的詳細(xì),具有參考借鑒價值,對本文感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JavaScript實(shí)現(xiàn)點(diǎn)擊文字切換登錄窗口的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊文字切換登錄窗口的方法,涉及javascript操作div層及相關(guān)樣式的技巧,需要的朋友可以參考下2015-05-05
提交表單時執(zhí)行func方法實(shí)現(xiàn)代碼
客戶端的js驗(yàn)證想必大家早已熟悉,今天本文帶著大家再回憶一下,主要是在提交表單之前執(zhí)行func方法,感興趣的你可以參考下哈,希望可以幫助到你2013-03-03
利用javascript打開模態(tài)對話框(示例代碼)
本篇文章主要是對利用javascript打開模態(tài)對話框的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01
微信小程序時間標(biāo)簽和時間范圍的聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了微信小程序時間標(biāo)簽和時間范圍的聯(lián)動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-02-02
javascript 手機(jī)號碼驗(yàn)證是否正確
javascript 手機(jī)號碼驗(yàn)證實(shí)現(xiàn)代碼。2009-06-06
Javascript String對象擴(kuò)展HTML編碼和解碼的方法
Javascript String對象擴(kuò)展HTML編碼和解碼的代碼2009-06-06

