最近要做一个手机端的热门标签动画的效果，要求手指离开屏幕的时候执行动画，点击热门标签又要跳转到搜索页，但点击热门标签的时候只会执行动画，不会跳到搜索页，后来得知手指点击屏幕的时候不只会触发click事件，还可能触发touch系列事件，而touch相关事件都是先于内嵌的onclick执行的，于是研究了一下点击事件的执行顺序。
测试代码：
<body>
<a href="javascript:alert('href');" id="test" οnclick="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后搞定。
8653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
