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