JavaScript中onmousedown与onclick的区别及页面跳转前的函数执行问题

onmousedown与onclick的基本区别

这两个事件在Web开发中非常常见。

虽然了解这两个事件的区别，但在实际开发中，往往没有充分利用它们之间的差异来执行特定操作。

通常情况下，使用onclick时也可以替换为onmousedown，但在大多数场景下，onclick的使用频率更高。

今天遇到了必须使用onmousedown的场景，因此特此记录这一经验。

两者的核心区别在于触发时机：onclick事件是在鼠标点击并弹起之后触发的；而onmousedown事件则是在鼠标按键按下的瞬间触发的。

简单来说，onclick的行为可以理解为onmousedown加上onmouseup的组合结果。

如果在某个位置按下鼠标，然后将光标移动到另一个位置再松开鼠标，此时会触发onmousedown事件，但onclick事件不会被触发。

页面跳转前的函数执行问题

我们要实现的功能是：点击a标签以切换到另一个页面，但在原页面关闭之前，需要触发一个特定的函数。注意，这并非window.onunload事件。

之前使用的是onclick事件，在IE浏览器中测试没有问题，但在Firefox浏览器中测试发现，在页面被销毁之前，该函数还没有来得及执行。

如果使用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）来执行跳转。