前端开发 | 移动端事件

二叶草 2020年2月9日22:02:32IT专区评论阅读模式

一:移动端事件

恶性事件是文本文档或是电脑浏览器对话框中产生的,特殊的互动一瞬间。


二:绑定事件方法

1、element.type=function(){}

参数说明:

①、type:事件类型

②、function:当事件发生时运行的函数

案例:

var btn=document.getElementById("btn");btn.onclick=function(){    alert("我是第一种绑定事件的方法");}

2、addEventListener()

是一个侦听事件并处理相应的函数

语法:

element.addEventListener(type, handle, false);

参数说明

①、type: 事件触发类型,如click,keypress等等!

②、handle:事件处理函数,事件出发后,定义可能发生的变化!!

③、false: 表示事件冒泡模型,true:捕获。

案例:

var btn=document.getElementById("btn");//语法:对象.addEventListener(“事件名”,函数,布尔值)//注意:事件名不用加on//布尔值:默认是false  false:冒泡   true:捕获btn.addEventListener("click",function(){   alert("我是第二种绑定事件的方法");},false)btn.removeEventListener("click",function(){   alert("我是第二种绑定事件的方法");},false);

3、jQuery on() 方法

在被选元素及子元素上添加一个或多个事件处理程序。

语法:

$(selector).on(event,childSelector,data,function)

参数说明:

①、 event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值,也可以是数组。必须是有效的事件。

②、childSelector 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。

③、data 可选。规定传递到函数的额外数据。

④、function 可选。当事件发生时运行的函数。

案例:

$("p").on("click",function(){  alert("段落被点击了。");});

三:click单击事件

单击事件,在移动端中,连续click的触发有200ms ~ 300ms的延迟。

1、出现300毫秒延迟原因

当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。

2、语法

$("selector").on("click",function(event){...})

四:tap轻击事件

在用户轻击一个元素时触发

1、语法

$("selector").on("tap",function(event){...})

2、参数说明

function(event)  必须。指定 tap 事件触发时执行的函数。

3、事件分类

①、tap: 手指碰一下屏幕会触发

②、longTap: 手指长按屏幕会触发

③、singleTap: 手指碰一下屏幕会触发

④、doubleTap: 手指双击屏幕会触发


五:touch触摸事件

1、事件分类

①、touchstart:手指触摸到屏幕会触发

②、touchmove:当手指在屏幕上移动时,会触发

③、touchend:当手指离开屏幕时,会触发

④、touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件

2、跟踪触摸的属性

①、touches

表示当前跟踪的触摸操作的touch对象的数组(当一个手指在触屏上时,event.touches.length=1;当两个手指在触屏上时,event.touches.length=2,以此类推。)

②、changedTouches

导致触摸事件被触发的触摸点数组

③、targetTouches

特定于事件目标的touch对象数组

3、触摸事件坐标

①、clientX  触摸目标在视口中的x坐标

②、clientY  触摸目标在视口中的y坐标

③、identifier 标识触摸的唯一ID

④、pageX  触摸目标在页面中的x坐标

⑤、pageY  触摸目标在页面中的y坐标

⑥、screenX  触摸目标在屏幕中的x坐标(电脑屏幕)

⑦、screenY  触摸目标在屏幕中的y坐标(电脑屏幕)

⑧、target  触摸的DOM节点目标

注意:clientX/Y和pageX/Y的区别在于前者相对于视觉视口的左上角,后者相对布局视口的左上角。布局视口 是可以滚动的

4、案例(使用touch封装成单击事件,解决时间延迟!)

<body>  <button id="btn">按钮</button>  <script>    function tap(ele, callback) {      // 记录开始时间      var startTime = 0,      // 控制允许延迟的时间          delayTime = 200,      // 记录是否移动,如果移动,则不触发tap事件          isMove = false;
      // 在touchstart时记录开始的时间      ele.addEventListener('touchstart', function (e) {        startTime = Date.now();      });
      // 如果touchmove事件被触发,则isMove为true      ele.addEventListener('touchmove', function (e) {        isMove = true;      });
      // 如果touchmove事件触发或者中间时间超过了延迟时间,则返回,否则,调用回调函数。      ele.addEventListener('touchend', function (e) {        if (isMove || (Date.now() - startTime > delayTime)) {          return;         } else {          callback(e);        }      })    }
    var btn = document.getElementById('btn');    tap(btn, function () {      alert('taped');    });</script></body>

六:swipe滑动事件

①、swipe:手指在屏幕上滑动时会触发

②、swipeLeft:手指在屏幕上向左滑动时会触发

③、swipeRight:手指在屏幕上向右滑动时会触发

④、swipeUp:手指在屏幕上向上滑动时会触发

⑤、swipeDown:手指在屏幕上向下滑动时会触发


七:Touch.js移动端事件库

是移动设备上的手势识别与事件库,是Web移动端touch点击事件不错的解决方案,由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具。

1、事件绑定

touch.on(element, types, callback)

参数说明:

①、element:类型element或string, 元素对象、选择器

②、types:类型string ,事件的类型(多为手势事件),可接受多个事件以空格分开;支持原生事件的透传

③、callback:类型function, 事件处理函数, 移除函数与绑定函数必须为同一引用

2、解除事件绑定

touch.off(element,’types’,callback)

3、部分手势事件

①、缩放类

pinchstart:缩放手势起点

pinchend:缩放手势终点

pinch:缩放手势

pinchin:收缩

pinchout:放大

②、旋转类

rotateleft:向左旋转

rotateright:向右旋转

rotate:旋转

③、滑动类

swipestart:滑动手势起点

swiping:滑动中

swipeend:滑动手势终点

swipeleft:向左滑动

swiperight:向右滑动

swipeup:向上滑动

swipedown:向下滑动

swipe:滑动

④、拖动类

dragstart:拖动开始[拖动屏幕]

drag:拖动[拖动手势]

dragend:拖动结束[拖动屏幕]

⑤、敲击类

hold:长按屏幕

tap:单击屏幕

doubletap:双击屏幕

4、手势新增的属性

originEvent:触发某事件的原生对象

type:事件的名称

rotation:旋转角度

scale:缩放比例

direction:操作的方向属性

fingersCount:操作的手势数量

position:相关位置信息, 不同的操作产生不同的位置信息

distance:swipe类两点之间的位移

distanceX, x:手势事件x方向的位移值, 向左移动时为负数

distanceY, y:手势事件y方向的位移值, 向上移动时为负数

angle:rotate事件触发时旋转的角度

duration:touchstart 与 touchend之间的时间戳

factor:swipe事件加速度因子

startRotate:启动单指旋转方法,在某个元素的touchstart触发时调用

5、事件配置

touch.config(config):对手势事件库进行全局配置。

参数描述:

config为一个对象

{    tap: true,     //tap类事件开关, 默认为true    doubleTap: true,    //doubleTap事件开关, 默认为true    hold: true,     //hold事件开关, 默认为true    holdTime: 650,      //hold时间长度    swipe: true,      //swipe事件开关    swipeTime: 300,    //触发swipe事件的最大时长    swipeMinDistance: 18,    //swipe移动最小距离    swipeFactor: 5,     //加速因子, 值越大变化速率越快    drag: true,     //drag事件开关    pinch: true,      //pinch类事件开关}

6、应用举例

<script type="text/javascript">    touch.on('body', 'swipeleft swiperight', function(ev){      console.log("you have done", ev.type);    });</script>

本文来源于:前端开发 | 移动端事件-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草

发表评论