移动web相关touch事件触发(touchstart/touchmove/touchend)
2016-01-08 15:09
691 查看
上周做了一个项目,发现一个DOM元素触发touch事件,竟然还会触发别的元素的click事件。
我先描述一下,当时遇到的问题。项目初始状态是下面这张图:
我给右上方的的搜索按钮,绑定了一个touchstart事件,点击以后出现一个搜索框。至于为什么不直接绑定click事件,是因为touch事件响应更快,交互上更加流畅。
这个搜索框右边的搜索按钮,绑定了一个click事件,点击后立即触发搜索。
当给这两个DOM元素,都绑定好事件以后。我们分别用android和iphone手机进行测试,得到了一个共同的结果。
当手指接触到搜索图标,立即触发了该元素的touchstart事件,下面的搜索框也随之显示。还没有完,这时候手指还会触发搜索按钮的click事件,导致搜索框提交。
整个交互变成了,点击搜索图标,就触发了搜索。这肯定不是我们想要的。
然后就查一些资料,得到了一些理论知识。最重要的一个就是事件流的概念,点击事件可以分解成多个事件。
在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend --》click。
事件流本身会持续进行下去的。
做了几个demo验证了一下,上面的理论。
首先给一个元素同时绑定touchstart和click事件,看谁先触发。
html:
上面逻辑是给content类名的div,绑定一个touch事件和一个click事件。分别让div的背景色变成绿色和蓝色。
手机测试一下,点击一下,div是先变成绿色然后又变成蓝色。
那能不能只触发touch事件,不去触发click事件呢?查阅相关资料, 发现了preventDefault()的方法,阻止事件的默认行为。
通过 preventDefault()方法,可以阻止后面事件的触发。
我先描述一下,当时遇到的问题。项目初始状态是下面这张图:
我给右上方的的搜索按钮,绑定了一个touchstart事件,点击以后出现一个搜索框。至于为什么不直接绑定click事件,是因为touch事件响应更快,交互上更加流畅。
这个搜索框右边的搜索按钮,绑定了一个click事件,点击后立即触发搜索。
当给这两个DOM元素,都绑定好事件以后。我们分别用android和iphone手机进行测试,得到了一个共同的结果。
当手指接触到搜索图标,立即触发了该元素的touchstart事件,下面的搜索框也随之显示。还没有完,这时候手指还会触发搜索按钮的click事件,导致搜索框提交。
整个交互变成了,点击搜索图标,就触发了搜索。这肯定不是我们想要的。
然后就查一些资料,得到了一些理论知识。最重要的一个就是事件流的概念,点击事件可以分解成多个事件。
在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend --》click。
事件流本身会持续进行下去的。
做了几个demo验证了一下,上面的理论。
首先给一个元素同时绑定touchstart和click事件,看谁先触发。
html:
<style> .content{ height:500px; background:#F00; } </style> <div class="content"></div>
var content = document.querySelector(".content"); content.addEventListener("touchend", function(){ content.style.background = "#0F0"; });content.addEventListener("click", function(){ content.style.background = "#00F"; });
上面逻辑是给content类名的div,绑定一个touch事件和一个click事件。分别让div的背景色变成绿色和蓝色。
手机测试一下,点击一下,div是先变成绿色然后又变成蓝色。
那能不能只触发touch事件,不去触发click事件呢?查阅相关资料, 发现了preventDefault()的方法,阻止事件的默认行为。
var content = document.querySelector(".content"); content.addEventListener("touchstart", function(e){ e.preventDefault(); content.style.background = "#0F0"; }) content.addEventListener("click", function(e){ content.style.background = "#00F"; });
通过 preventDefault()方法,可以阻止后面事件的触发。
相关文章推荐
- Android的Touch事件处理机制介绍
- js的touch事件的实际引用
- Android Touch事件分发过程详解
- Secnha Commands 3 使用详解(从创建到打包)
- sencha touch 彩色图标按钮(button+ico)
- 指尖下的js ——多触式web前端开发之一:对于Touch的处理
- Android 编程下 Touch 事件的分发和消费机制
- Linux下查看 && 修改文件的时间属性
- linux 命令-- touch
- 随记:关于linux setUID
- shell命令find删除修改后带尾巴的重复的文件
- shell命令find删除修改后带尾巴的重复的文件
- shell chown改变文件属主命令
- WIN和linux下文件名长度限制
- Android FrameWork——Touch事件派发过程详解
- linux常用命令
- WIN和linux下文件名长度限制
- shell chmod中数字与字母的含义
- monkeyrunner——控件交互总结
- android 事件分发机制(转载)