js函數(shù)中onmousedown和onclick的區(qū)別和聯(lián)系探討
更新時(shí)間：2013年05月19日 15:20:32 作者：
了解這兩個(gè)事件的區(qū)別，但是實(shí)際并沒(méi)有使用到這兩個(gè)事件的區(qū)別去做一些操作，通常使用onclick的時(shí)候也可以使用onmousedown，使用onclick的時(shí)候更多一些
這兩個(gè)事件很常見(jiàn)。
了解這兩個(gè)事件的區(qū)別，但是實(shí)際并沒(méi)有使用到這兩個(gè)事件的區(qū)別去做一些操作。
通常使用onclick的時(shí)候也可以使用onmousedown，使用onclick的時(shí)候更多一些。
今天碰到了非使用onmousedown不可的時(shí)候，故特此記錄。
先說(shuō)一下區(qū)別：onclick是在鼠標(biāo)點(diǎn)擊彈起之后觸發(fā)的事件。onmousedown是在鼠標(biāo)按下之后觸發(fā)的事件。
簡(jiǎn)單的說(shuō)onclick = onmousedown + onmouseup;
如果在某個(gè)地方按下鼠標(biāo)后移開(kāi)鼠標(biāo)在另外一個(gè)地方松開(kāi)鼠標(biāo)會(huì)觸發(fā)onmousedown事件，但是onclick事件卻不會(huì)被觸發(fā)。
我們今天要實(shí)現(xiàn)的功能是點(diǎn)擊a標(biāo)簽，切換到另外一個(gè)頁(yè)面，在原頁(yè)面關(guān)閉之前需要觸發(fā)一個(gè)函數(shù)。不是windowunload。
之前使用的是onclick事件，IE中測(cè)試無(wú)問(wèn)題，但是在FF中測(cè)試發(fā)現(xiàn)，在頁(yè)面被銷毀之前還沒(méi)有來(lái)得及執(zhí)行這個(gè)函數(shù)。
如果使用onmousedown事件，雖然也沒(méi)有辦法保證該函數(shù)一定被執(zhí)行，但是為該函數(shù)的執(zhí)行爭(zhēng)取了一定的時(shí)間，因?yàn)樘D(zhuǎn)是在鼠標(biāo)彈起之后執(zhí)行的。
解決辦法一：onclick="return test()"，當(dāng)且僅當(dāng)當(dāng)該函數(shù)返回true之后才執(zhí)行跳轉(zhuǎn)。這樣導(dǎo)致了一個(gè)新的問(wèn)題。如果我們?cè)趖est函數(shù)中執(zhí)行了多線程程序或者新開(kāi)線程的程序后，會(huì)先返回true，跳轉(zhuǎn)，新開(kāi)的線程就沒(méi)有被執(zhí)行。如下面的函數(shù)：
function test()
{
(new Image()).src="1.html";
window.open("1.html","_new");
//alert("ok");
return true;
}
我在1.html文件中設(shè)置了<body onload="javascript:alert('ok')">，當(dāng)1.html并沒(méi)有被完全渲染結(jié)束時(shí)，跳轉(zhuǎn)已經(jīng)執(zhí)行了。new image函數(shù)也沒(méi)有保證已經(jīng)被執(zhí)行了。
在使用單一線程執(zhí)行函數(shù)時(shí)，可使用return test（）這種方法。
解決辦法二：估計(jì)一下test函數(shù)的多線程函數(shù)的最長(zhǎng)執(zhí)行速度，加入執(zhí)行時(shí)間為100.不在a標(biāo)簽中使用跳轉(zhuǎn)。在test函數(shù)中使用setTimeout（location.href="1.html",100）來(lái)執(zhí)行跳轉(zhuǎn)。
了解這兩個(gè)事件的區(qū)別，但是實(shí)際并沒(méi)有使用到這兩個(gè)事件的區(qū)別去做一些操作。
通常使用onclick的時(shí)候也可以使用onmousedown，使用onclick的時(shí)候更多一些。
今天碰到了非使用onmousedown不可的時(shí)候，故特此記錄。
先說(shuō)一下區(qū)別：onclick是在鼠標(biāo)點(diǎn)擊彈起之后觸發(fā)的事件。onmousedown是在鼠標(biāo)按下之后觸發(fā)的事件。
簡(jiǎn)單的說(shuō)onclick = onmousedown + onmouseup;
如果在某個(gè)地方按下鼠標(biāo)后移開(kāi)鼠標(biāo)在另外一個(gè)地方松開(kāi)鼠標(biāo)會(huì)觸發(fā)onmousedown事件，但是onclick事件卻不會(huì)被觸發(fā)。
我們今天要實(shí)現(xiàn)的功能是點(diǎn)擊a標(biāo)簽，切換到另外一個(gè)頁(yè)面，在原頁(yè)面關(guān)閉之前需要觸發(fā)一個(gè)函數(shù)。不是windowunload。
之前使用的是onclick事件，IE中測(cè)試無(wú)問(wèn)題，但是在FF中測(cè)試發(fā)現(xiàn)，在頁(yè)面被銷毀之前還沒(méi)有來(lái)得及執(zhí)行這個(gè)函數(shù)。
如果使用onmousedown事件，雖然也沒(méi)有辦法保證該函數(shù)一定被執(zhí)行，但是為該函數(shù)的執(zhí)行爭(zhēng)取了一定的時(shí)間，因?yàn)樘D(zhuǎn)是在鼠標(biāo)彈起之后執(zhí)行的。
解決辦法一：onclick="return test()"，當(dāng)且僅當(dāng)當(dāng)該函數(shù)返回true之后才執(zhí)行跳轉(zhuǎn)。這樣導(dǎo)致了一個(gè)新的問(wèn)題。如果我們?cè)趖est函數(shù)中執(zhí)行了多線程程序或者新開(kāi)線程的程序后，會(huì)先返回true，跳轉(zhuǎn)，新開(kāi)的線程就沒(méi)有被執(zhí)行。如下面的函數(shù)：
復(fù)制代碼 代碼如下:
function test()
{
(new Image()).src="1.html";
window.open("1.html","_new");
//alert("ok");
return true;
}
我在1.html文件中設(shè)置了<body onload="javascript:alert('ok')">，當(dāng)1.html并沒(méi)有被完全渲染結(jié)束時(shí)，跳轉(zhuǎn)已經(jīng)執(zhí)行了。new image函數(shù)也沒(méi)有保證已經(jīng)被執(zhí)行了。
在使用單一線程執(zhí)行函數(shù)時(shí)，可使用return test（）這種方法。
解決辦法二：估計(jì)一下test函數(shù)的多線程函數(shù)的最長(zhǎng)執(zhí)行速度，加入執(zhí)行時(shí)間為100.不在a標(biāo)簽中使用跳轉(zhuǎn)。在test函數(shù)中使用setTimeout（location.href="1.html",100）來(lái)執(zhí)行跳轉(zhuǎn)。
您可能感興趣的文章:
- JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
- javascript中onclick(this)用法介紹
- js給onclick事件賦值，動(dòng)態(tài)傳參數(shù)實(shí)例解說(shuō)
- JavaScript給按鈕綁定點(diǎn)擊事件（onclick）的方法
- javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
- js動(dòng)態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù)
- js修改onclick動(dòng)作的四種方法(推薦)
- js onclick事件傳參講解
- 代碼觸發(fā)js事件(click、change)示例應(yīng)用
- JavaScript中click和onclick本質(zhì)區(qū)別與用法分析
相關(guān)文章
document.getElementById的簡(jiǎn)寫(xiě)方式(獲取id對(duì)象的簡(jiǎn)略寫(xiě)法)
在js編寫(xiě)中，經(jīng)常需要獲取id對(duì)象，如果直接用getElementById來(lái)獲取，代碼多而且老的瀏覽器不支持這屬性，所有大家可以考慮用下面的代碼。2010-09-09
在項(xiàng)目中，我們經(jīng)常要遇到對(duì)日期時(shí)間進(jìn)行格式化，下面我們就來(lái)先小結(jié)一下各種時(shí)間格式化的方法，然后再通過(guò)實(shí)例來(lái)進(jìn)行分析2014-11-11
在用戶體驗(yàn)過(guò)程中可能會(huì)出現(xiàn)這樣的情況：自定義打開(kāi)新窗口的樣式,本文將介紹詳細(xì)的解決方法，需要了解的朋友可以參考下2012-12-12
JavaScript中的call方法和apply方法使用對(duì)比
這篇文章主要介紹了JavaScript中的call方法和apply方法使用對(duì)比,需要的朋友可以參考下2015-08-08
JSON.stringify() 方法是將一個(gè)JavaScript值(對(duì)象或者數(shù)組)轉(zhuǎn)換為一個(gè) JSON字符串，如果指定了replacer是一個(gè)函數(shù)，則可以選擇性的替換值，或者如果指定了replacer是一個(gè)數(shù)組，可選擇性的僅包含數(shù)組指定的屬性2019-06-06
如何讓頁(yè)面在打開(kāi)時(shí)自動(dòng)刷新一次讓圖片全部顯示
我的網(wǎng)頁(yè)的圖片較多，而服務(wù)器也不是很好，所以每次打開(kāi)網(wǎng)頁(yè)后總有一、兩幅圖片無(wú)法顯示，但刷新一遍后又全部可顯示了,這種問(wèn)題相信每個(gè)人都遇到過(guò)，接下來(lái)介紹詳細(xì)解決方法2012-12-12
實(shí)現(xiàn)前后端數(shù)據(jù)交互方法匯總
這篇文章給大家介紹幾種常用的前后端數(shù)據(jù)交互方法，并給出使用建議。以提高前后端協(xié)同開(kāi)發(fā)的效率。非常的詳細(xì)，推薦給小伙伴們，有需要的小伙伴可以參考下。2015-04-04
2019年度web前端面試題總結(jié)(主要為Vue面試題)
轉(zhuǎn)眼2019又要過(guò)去了，作為一名前端碼農(nóng)，又熬過(guò)一個(gè)沒(méi)日沒(méi)夜的年頭，頭發(fā)又少了不少，去年的學(xué)習(xí)計(jì)劃一半也沒(méi)完成，唉。。。 現(xiàn)在為大家總結(jié)一下這一年面試的幾家公司的關(guān)于前端面試題吧2020-01-01
var that = this;，這代表什么意思呢？this代表的是當(dāng)前對(duì)象，var that=this就是將當(dāng)前的this對(duì)象復(fù)制一份到that變量中，下面為大家介紹這樣做有什么意義2014-05-05
THREE.JS入門(mén)教程(6)創(chuàng)建自己的全景圖實(shí)現(xiàn)步驟
Three.js是一個(gè)偉大的開(kāi)源WebGL庫(kù)，WebGL允許JavaScript操作GPU，在瀏覽器端實(shí)現(xiàn)真正意義的3D,全景圖非?？?。使用Three.js做一個(gè)屬于自己的全景圖并不是那么困難,感興趣的朋友可以了解下啊，希望本文對(duì)你有所幫助2013-01-01