移动端事件介绍

2018-03-14

移动端常用事件介绍

1.手势事件

touchstart：当手指放在屏幕上触发;

touchmove：当手指在屏幕上滑动时，连续地触发;

touchend：当手指从屏幕上离开时触发;

touchcancel： 当系统停止跟踪时触发; 该事件暂时使用不到;

2.tap类事件

触碰事件，一般用于代替click事件，

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

longTap: 手指长按屏幕会触发

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

doubleTap: 手指双击屏幕会触发

3.swipe类事件

swipe：手指在屏幕上滑动时会触发

swipeLeft：手指在屏幕上向左滑动时会触发

swipeRight：手指在屏幕上向右滑动时会触发

swipeUp：手指在屏幕上向上滑动时会触发

swipeDown：手指在屏幕上向下滑动时会触发

事件处理程序的添加与删除

var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
            element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    }
};

该函数接受三个参数

element 执行该函数的对象
type 触发事件对象
handler 执行事件
例：
在window中触摸时触发打印出事件对象

var touch = document.getElementById("touch");
EventUtil.addHandler(touch,"touchstart",function(event){
    console.log(event);
});

touches:

表示当前跟踪的触摸操作的touch对象的数组。

当一个手指在触屏上时，event.touches.length = 1; 当二个手指在触屏上时，event.touches.length=2, 以此类推

changedTouches:

表示上次触摸以来发生了什么改变的touch对象的数组。

每个touch对象都包含了以下几个属性：

clientX 触摸目标在视口中的X坐标。

clientY触摸目标在视口中的Y坐标。

Identifier: 标示触摸的唯一ID。

pageX 触摸目标在页面中的X坐标。

pageY 触摸目标在页面中的Y坐标。

screenX触摸目标在屏幕中的X坐标。

screenY 触摸目标在屏幕中的Y坐标。

target  触摸的DOM节点目标。

几个基本知识点

1.判断是否为iPhone

//  ：
function isAppleMobile() {
    return (navigator.platform.indexOf(‘iPad‘) != -1);
};

2.自动大写与自动修正

1
2
3

// 要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项

<input type="text" autocapitalize="off" autocorrect="off" />

3.禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none

禁止用户选中文字

-webkit-user-select:none

关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

1	this.value = this.value.replace(/\u2006/g, ‘‘);

Andriod 上去掉语音输入按钮

1	input::-webkit-input-speech-button {display: none}

判断是否为微信浏览器；

function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}