js函數中onmousedown和onclick的區別和聯系探討

2019-11-20 22:42:36

字體：大中小

來源：轉載

供稿：網友

這兩個事件很常見。
了解這兩個事件的區別，但是實際并沒有使用到這兩個事件的區別去做一些操作。
通常使用onclick的時候也可以使用onmousedown，使用onclick的時候更多一些。
今天碰到了非使用onmousedown不可的時候，故特此記錄。

先說一下區別：onclick是在鼠標點擊彈起之后觸發的事件。onmousedown是在鼠標按下之后觸發的事件。
簡單的說onclick = onmousedown + onmouseup;
如果在某個地方按下鼠標后移開鼠標在另外一個地方松開鼠標會觸發onmousedown事件，但是onclick事件卻不會被觸發。
我們今天要實現的功能是點擊a標簽，切換到另外一個頁面，在原頁面關閉之前需要觸發一個函數。不是windowunload。
之前使用的是onclick事件，IE中測試無問題，但是在FF中測試發現，在頁面被銷毀之前還沒有來得及執行這個函數。
如果使用onmousedown事件，雖然也沒有辦法保證該函數一定被執行，但是為該函數的執行爭取了一定的時間，因為跳轉是在鼠標彈起之后執行的。

解決辦法一：onclick="return test()"，當且僅當當該函數返回true之后才執行跳轉。這樣導致了一個新的問題。如果我們在test函數中執行了多線程程序或者新開線程的程序后，會先返回true，跳轉，新開的線程就沒有被執行。如下面的函數：

復制代碼代碼如下:

 
function test() 
{ 
(new Image()).src="1.html"; 
window.open("1.html","_new"); 
//alert("ok"); 
return true; 
} 

我在1.html文件中設置了<body onload="javascript:alert('ok')">，當1.html并沒有被完全渲染結束時，跳轉已經執行了。new image函數也沒有保證已經被執行了。
在使用單一線程執行函數時，可使用return test（）這種方法。

解決辦法二：估計一下test函數的多線程函數的最長執行速度，加入執行時間為100.不在a標簽中使用跳轉。在test函數中使用setTimeout（location.href="1.html",100）來執行跳轉。

上一篇：JavaScript中幾個重要的屬性(this、constructor、prototype)介紹

下一篇：下拉菜單點擊實現連接跳轉功能的js代碼