click事件的执行顺序
最近要做一个手机端的热门标签动画的效果,要求手指离开屏幕的时候执行动画,点击热门标签又要跳转到搜索页,但点击热门标签的时候只会执行动画,不会跳到搜索页,后来得知手指点击屏幕的时候不只会触发click事件,还可能触发touch系列事件,而touch相关事件都是先于内嵌的onclick执行的,于是研究了一下点击事件的执行顺序。
测试代码:
<body>
<a href="javascript:alert('href');" id="test" onclick="alert('内嵌onclick');">点击我</a>
<script>
var test = document.getElementById("test");
test.addEventListener("click", function () { alert("外部click事件监听"); }, false);
test.addEventListener("touchmove", function () { alert("外部touchmove事件监听"); }, false);
test.addEventListener("touchend", function () { alert("外部touchend事件监听"); }, false);
</script>
</body>
在FF与Chrome下的测试结果:弹出顺序依次为“内嵌onclick”,“外部click事件监听”,“href”。
而在wap开发时还需考虑到用手指点击屏幕时还会触发touchmove,touchend等事件,这些事件都是先于以上几种情况执行的,在手机浏览器中,弹出顺序依次为:
"外部touchmove事件监听",“外部touchend事件监听”,"内嵌onclick",“外部click事件监听”,“href”。
对于点击时候只执行动画不跳到搜索页的问题,将内嵌的onclick改为ontouchend后搞定。