js函数中onmousedown和onclick的区别和联系探讨
更新时间：2013年05月19日 15:20:32 作者：
了解这两个事件的区别，但是实际并没有使用到这两个事件的区别去做一些操作，通常使用onclick的时候也可以使用onmousedown，使用onclick的时候更多一些
这两个事件很常见。
了解这两个事件的区别，但是实际并没有使用到这两个事件的区别去做一些操作。
通常使用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）来执行跳转。
了解这两个事件的区别，但是实际并没有使用到这两个事件的区别去做一些操作。
通常使用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）来执行跳转。
您可能感兴趣的文章:
- JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
- javascript中onclick(this)用法介绍
- js给onclick事件赋值，动态传参数实例解说
- JavaScript给按钮绑定点击事件（onclick）的方法
- javascript 动态改变onclick事件触发函数代码
- IE8的JavaScript点击事件(onclick)不兼容的解决方法
- js动态添加onclick事件可传参数与不传参数
- js修改onclick动作的四种方法(推荐)
- js onclick事件传参讲解
- 代码触发js事件(click、change)示例应用
- JavaScript中click和onclick本质区别与用法分析
相关文章
document.getElementById的简写方式(获取id对象的简略写法)
在js编写中，经常需要获取id对象，如果直接用getElementById来获取，代码多而且老的浏览器不支持这属性，所有大家可以考虑用下面的代码。2010-09-09
在项目中，我们经常要遇到对日期时间进行格式化，下面我们就来先小结一下各种时间格式化的方法，然后再通过实例来进行分析2014-11-11
在用户体验过程中可能会出现这样的情况：自定义打开新窗口的样式,本文将介绍详细的解决方法，需要了解的朋友可以参考下2012-12-12
JavaScript中的call方法和apply方法使用对比
这篇文章主要介绍了JavaScript中的call方法和apply方法使用对比,需要的朋友可以参考下2015-08-08
JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，如果指定了replacer是一个函数，则可以选择性的替换值，或者如果指定了replacer是一个数组，可选择性的仅包含数组指定的属性2019-06-06
我的网页的图片较多，而服务器也不是很好，所以每次打开网页后总有一、两幅图片无法显示，但刷新一遍后又全部可显示了,这种问题相信每个人都遇到过，接下来介绍详细解决方法2012-12-12
这篇文章给大家介绍几种常用的前后端数据交互方法，并给出使用建议。以提高前后端协同开发的效率。非常的详细，推荐给小伙伴们，有需要的小伙伴可以参考下。2015-04-04
转眼2019又要过去了，作为一名前端码农，又熬过一个没日没夜的年头，头发又少了不少，去年的学习计划一半也没完成，唉。。。 现在为大家总结一下这一年面试的几家公司的关于前端面试题吧2020-01-01
var that = this;，这代表什么意思呢？this代表的是当前对象，var that=this就是将当前的this对象复制一份到that变量中，下面为大家介绍这样做有什么意义2014-05-05
Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D,全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难,感兴趣的朋友可以了解下啊，希望本文对你有所帮助2013-01-01
最新评论