移动端事件（touchstart、touchmove、touchend）--移动端开发整理笔记（三）

移动端事件

三个事件

  • touchstart 手指触摸 相当于PC端 mousedown
  • touchend 手指抬起 相当于PC端 mouseup
  • touchmove 手指滑动 相当于PC端 mousmove

注意： touch事件在chrome的模拟器下，部分版本通过on的方式来添加事件无效，这时候需要事件监听的方法 addEventListener("事件名",函数,冒泡或捕获)，它有以下优点：

  1. 不会存在事件前后覆盖问题

  2. 在chrome的模拟器下可以一直识别

写法如下：

box.addEventListener(
"touchstart",
function(ev) {
console.log(1);
}
);

阻止默认事件

box.addEventListener(
"touchstart",
function(ev) {
console.log(1);
}
);
ev.preventDefault(); // 阻止默认事件

以上阻止掉：document touchstart的默认事件，可以解决一下问题：

  1. 阻止页面上的文字被选中 -- 可以通过阻止冒泡使某个元素上的文字被选中

  2. 阻止页面上的系统菜单

隐患: 页面上的所有滚动条失效

阻止 document的 touchstart 或者 touchmove，可以清除系统默认的回弹

事件点透

在移动端 PC事件（如mouseover） 有 300ms的延迟

  1. 点击了页面之后，浏览器会记录点击下去的坐标

  2. 300ms后，在该坐标找到现在在这的元素 执行事件

解决方法：

  1. 阻止默认事件 (部分安卓机型不支持)

  2. 不在移动端使用鼠标事件，不用a标签做页面跳转

防止误触

<!doctype html>




无标题文档




百度
百度
百度
百度
百度

touchEvent

  1. touches 当前屏幕上的手指列表

  2. targetTouches 当前元素上的手指列表

  3. changedTouches 触发当前事件的手指列表

每个Touch对象包含的属性如下。

  • clientX：触摸目标在视口中的x坐标。

  • clientY：触摸目标在视口中的y坐标。

  • identifier：标识触摸的唯一ID。

  • pageX：触摸目标在页面中的x坐标。

  • pageY：触摸目标在页面中的y坐标。

  • screenX：触摸目标在屏幕中的x坐标。

  • screenY：触摸目标在屏幕中的y坐标。

  • target：触目的DOM节点目标。

  • force: 压力大小，是从0.0(没有压力)到1.0(最大压力)的浮点数

posted @ 2017-09-24 22:02  Lorin-Yang  阅读(483)  评论(0)    收藏  举报