移动互联网是未来的发展趋势，现在国内很多互联网大佬都在争取移动这一块大饼，如微信及支付宝是目前比较成功的例子，当然还有各种APP和web运用。

由于公司的需要，最近也在开发移动web，对于一个没有移动开发经验的人来说，其实也是比较困恼的一件事情。对于移动web开发目前主要是基于webkit内核的浏览器。在webkit内核的环境下开发，你可以充分的运用html5+css3，还有它的一些私有属性。这让我很兴奋。可是，毕竟，对于一个长期习惯pc端做固定像素开发的前端，突然转为移动端运用html5+css3及响应式开发，还真有点不适应。更不用说移动的一些触摸事件及一些触摸手势之类。这些对于一个门外汉来说还真有点蒙。

不过，知识总是有个熟悉的过程，我也相信自个能学好移动web的开发技术。下面是我对移动端的一些轻触事件的学习。不过对于有移动开发经验的人来说，下面我写的知识可能比较肤浅，这样的话，你可以跳过本文章；对于和我一样没啥基础的，可以好好阅读完。

在webkit内的触摸事件主要有以下几个：
touchstart---->触摸开始
touchmove----->接触点改变
touchend------>触摸结束
touchcancel--->触摸取消

下面我主要针对我日常用的比较多的touchstart,touchend两个事件进行封装，使得其像jQuery类库一样方便使用。

代码如下：

首先是touchEvent.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
(function(window, undefined){
     
    var TOUCHSTART, TOUCHEND;
     
    if (typeof(window.ontouchstart) != 'undefined') {
         
        TOUCHSTART = 'touchstart';
        TOUCHEND   = 'touchend';
         
    } else if (typeof(window.onmspointerdown) != 'undefined') {
        TOUCHSTART = 'MSPointerDown';
        TOUCHEND   = 'MSPointerUp';
    } else {
        TOUCHSTART = 'mousedown';
        TOUCHEND   = 'mouseup';
    }
     
     
    function NodeFacade(node){
         
        this._node = node;
         
    }
     
    NodeFacade.prototype.getDomNode = function() {
        return this._node;
    }
     
    NodeFacade.prototype.on = function(evt, callback) {
         
        if (evt === 'tap') {
            this._node.addEventListener(TOUCHSTART, callback);
        } else if (evt === 'tapend') {
            this._node.addEventListener(TOUCHEND, callback);
        } else {
            this._node.addEventListener(evt, callback);
        }
         
        return this;
         
    }
     
    NodeFacade.prototype.off = function(evt, callback) {
        if (evt === 'tap') {
            this._node.removeEventListener(TOUCHSTART, callback);
        } else if (evt === 'tapend') {
            this._node.removeEventListener(TOUCHEND, callback);
        } else {
            this._node.removeEventListener(evt, callback);
        }
         
        return this;
    }
     
    window.$ = function(selector) {
 
        var node = document.querySelector(selector);
 
        if(node) {
            return new NodeFacade(node);
        } else {
            return null;
        }
    }
 
})(window);

　　其次在页面中引用该js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="touchEvent.js"></script>
</head>
<body>
    <input type="button" class="button" value="button" />
    <script type="text/javascript">
        $('.button').on('tap', function(e) {
            e.preventDefault();
            alert('tap');
        }).on('tapend', function(e) {
            alert('tapend');
        });
    </script>
</body>
</html>

　以上，就是在学习移动端事件的小小成果。移动端的知识不比pc简单，所以要有耐心去学习，知识才会一点点的积累。

touchstart和touchend事件的更多相关文章

  1. 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置

    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...

  2. 手机端touchstart,touchmove,touchend事件，优化用户划入某个可以点击LI的效果

    在我们滑动手机的时候,如果LI或者DIV标签可以点击,那么在移动端给用户一个效果 /*id为添加效果LI上的UL的ID,或者是当前DIV的ID*/ function doTouchPublic(id) ...

  3. touchstart,touchmove,touchend事件 写法

    jQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...

  4. 移动端开发touchstart，touchmove，touchend事件详解和项目

    移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...

  5. touchstart,touchmove,touchend触摸事件的小小实践心得

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  6. 解决移动端touch事件（touchstart／touchend） 的穿透问题

    情景: 我们在移动端点击事件click对比touchend会有很明显的300ms的延迟,为啥? 浏览器在 click 后会等待约300ms去判断用户是否有双击行为(手机需要知道你是不是想双击放大网页内 ...

  7. 移动端touchstar、touchmove、touchend 事件如果页面有滚动时不让触发 touchend 事件。

    /*仅适用于内容中点击元素.对于拖动等元素,需要自行在页面处理. * 主要是绑定touchstart和touchmove事件,并判断用户按下之后手指移动了多少像素. * 如果手指移动距离小于10像素, ...

  8. 移动端touchstart,touchmove,touchend

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  9. 获取移动端 touchend 事件中真正触摸点下方的元素

    移动端的touchstart, touchmove, touchend三个事件,拖动元素结束时,获取到了touchend事件, 但是event.touches[0].target所指向的元素却是tou ...

随机推荐

  1. Go基础之--位操作中你所不知道的用法

    之前一直忽略的就是所有语言中关于位操作,觉得用处并不多,可能用到也非常简单的用法,但是其实一直忽略的是它们的用处还是非常大的,下面先回顾一下位操作符的基础 位操作符 与操作:&1 & ...

  2. Ipad弹出UIAlertControllerStyleActionSheet时发生崩溃

    pad弹出UIAlertControllerStyleActionSheet时,在iphone上运行正常,但在ipad上崩溃,解决代码如下: UIAlertController *alertVc = ...

  3. 【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程

    原文链接:http://www.cnblogs.com/shuoer/p/7779131.html 用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程 首先解释下什么 ...

  4. 中英文代码对比系列之Java一例

    原文: https://zhuanlan.zhihu.com/p/30905033. 作者为本人. 这个系列将对同一段代码进行中文命名和英文命名两个版本的比较. 目的包括, 演示中文命名, 发现命名时 ...

  5. ML笔记：Where does the error come from?

    error来自哪? 来自于偏差Bias和方差Variance. 就如打靶时瞄准一个点f平均,打出的点f星分布在该点周围. 该点与实际靶心f帽的距离就是偏差Bias, 打出的点与该点的分布距离就是方差V ...

  6. javascript算法题判断输入年份是否是闰年

    用户输入一个年份,判断这个年是否是闰年.判断闰年条件:① 非整百年数除以4,无余为闰,有余不闰:② 整百年数除以400,无余为闰,有余不闰.比如:2000年,整百数年,就要用②公式,除以400,无余数 ...

  7. Android 常见 Memory Leak 原因及解决办法总结

    待整理: http://geek.csdn.net/news/detail/50692 背景 在Android开发过程中,我们经常碰到的情况就是在我们不清楚为什么情况下,程序突然出现Crash了.其中 ...

  8. 自学Python全栈开发的第二次笔记（Python需要注意的地方）

    好几天没写blog了,今天整理整理.写blog一定要坚持下去.     Python解释器 #!/usr/bin/env python #-*-coding:utf-8-*-   #  无效的内容,只 ...

  9. 运行期以索引获取tuple元素-C++11之2

    //运行期以索引获取tuple元素-C++11之2 //需支持C++11及以上标准的编译器,VS2017 15.5.x.CodeBlocks 16.01 gcc 7.2 //参见<深入应用C++ ...

  10. AndroidStudio下gradle的入门介绍与使用

    參考: 网易云加密:http://apk.aq.163.com 网易云捕:http://crash.163.com 1 Groovy Groovy 是没有类型的 Java 代码 ,语法更简洁.形式有点 ...