click事件的执行顺序

最近要做一个手机端的热门标签动画的效果，要求手指离开屏幕的时候执行动画，点击热门标签又要跳转到搜索页，但点击热门标签的时候只会执行动画，不会跳到搜索页，后来得知手指点击屏幕的时候不只会触发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后搞定。

转载于:https://www.cnblogs.com/yayadoudou/archive/2012/07/15/2592096.html

click事件的执行顺序相关推荐

vue 由 clearTimeout无法清除定时器引发的vue 周期函数，事件代码执行顺序思考
vue 由 clearTimeout无法清除定时器引发的vue 周期函数,事件代码执行顺序思考最近做个移动的项目,遇到需求:首页无操作20秒,自动退出登录.其他页面20秒无操作,自动跳转首页. 所谓 ...
ASP.NET 2.0中Page事件的执行顺序
Page 执行中将按照如下顺序激活事件: Page.PreInit Page.Init Page.InitComplite Page.PreLoad Page.Load Page.LoadComple ...
【转】ASP.NET Page事件的执行顺序
Page 执行中将按照如下顺序激活事件: Page.PreInit Page.Init Page.InitComplite Page.PreLoad Page.Load Page.LoadComple ...
MasterPage，Page 2者之间事件的执行顺序
MasterPage,Page 2者之间事件的执行顺序如下: MasterPage控件 Init 事件. Page控件 Init 事件. MasterPage Init 事件. Page Init 事 ...
【转】ASP.NET 2.0中Page事件的执行顺序
有些补充的是,控件的一些事件是在Page的PreRender之前的,比如说SqlDataSource的DataBind,所以在页面PreRender内,是有机会修改这些控件的参数的.但是可以再PreR ...
form表单中onclick事件和onsubmit事件的执行顺序
说来很惭愧,今天因为form表单的一个小问题困扰了一下午.虽然最终得以解决,但花费的时间实在是令人汗颜,现在总结一下遇到的问题. 先说一下背景,之前帮一个朋友的项目写了一个原生js的表单验证,今天突然 ...
鼠标三种触发事件mousedown、mouseup、click关系及执行顺序
三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件. 与 click 事件不同,mousedown 事件仅需要按键被按 ...
HTML事件的执行顺序
2019独角兽企业重金招聘Python工程师标准>>> var body = document.getElementsByTagName("body"); bod ...
Flex启动事件的执行顺序
很多时候,在创建一个Flex应用程序,不知道什么时候执行哪儿个启动事件.它们被执行的顺序是怎么排序的? 首先看一看都有哪儿些启动事件,主要有preinitialize,initialize,creat ...
前台JS事件与服务器事件的执行顺序
(1)页面加载: 服务器端Page_Load------>前台js的onload事件 (2)服务器端控件(假如是按钮控件) 前台的js事件----->服务器端Page_Load-----& ...

click事件的执行顺序

click事件的执行顺序相关推荐

最新文章

热门文章