2021-05-11

 

1.0  移动端事件

 

1.  touch类事件

触摸事件，有touchstart touchmove touchend touchcancel 四种之分

touchstart：手指触摸到屏幕会触发

touchmove：当手指在屏幕上移动时，会触发

touchend：当手指离开屏幕时，会触发

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

 

2   tap类事件

触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分

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

longTap: 手指长按屏幕会触发

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

doubleTap: 手指双击屏幕会触发代码

 

 

1.1 在做项目整体布局的时候，应当注意的点是尽量少用行内样式，这样容易使得

整体的项目布局发生混乱，页面布局错误

应当避免使用这种形式的样式布局

 

移动端事件代码演示：

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;
        }
    }
};
var touch = document.getElementById("touch");
EventUtil.addHandler(touch,"touchstart",function(event){
    console.log(event);
})；

// 连续滑动触发
EventUtil.addHandler(window,"touchmove",function(event){
    alert(1);
})；
//当手指从屏幕上离开时触发;
EventUtil.addHandler(window,"touchend",function(event){
    alert(1);
})