touchstart和touchend事件

touchstart和touchend事件

移动互联网是未来的发展趋势，现在国内很多互联网大佬都在争取移动这一块大饼，如微信及支付宝是目前比较成功的例子，当然还有各种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简单，所以要有耐心去学习，知识才会一点点的积累。

时间： 2024-08-02 11:00:29

touchstart和touchend事件的相关文章

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

在我们滑动手机的时候,如果LI或者DIV标签可以点击,那么在移动端给用户一个效果 /*id为添加效果LI上的UL的ID,或者是当前DIV的ID*/ function doTouchPublic(id){ setTimeout(function(){ var obj=document.getElementById(id); touchPublic.tagUltagDiv(obj); },300); }; var touchPublic={ tagUltagDiv:function(obj){ va

touchstart,touchmove,touchend事件 写法

jQuery写法: 1 $('#id').on('touchstart',function(e) { 2 var _touch = e.originalEvent.targetTouches[0]; 3 var _x= _touch.pageX; 4 }); 5 6 $('#id').on('touchmove',function(e) { 7 var _touch = e.originalEvent.targetTouches[0]; 8 var _x= _touch.pageX; 9 });

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

情景: 我们在移动端点击事件click对比touchend会有很明显的300ms的延迟,为啥? 浏览器在 click 后会等待约300ms去判断用户是否有双击行为(手机需要知道你是不是想双击放大网页内容). 如果300ms内没有再一次click,那么就判定这是一次单机行为.所以我们基本上都用(touchstart/touchend). 但是这些事件在执行完之后还会执行一次click事件(具体原因解释起来太麻烦了,这要从JS事件监听机制的根本的讲起...其实我也了解有限..) 解决: 解决方案一:

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

/*仅适用于内容中点击元素.对于拖动等元素,需要自行在页面处理. * 主要是绑定touchstart和touchmove事件,并判断用户按下之后手指移动了多少像素. * 如果手指移动距离小于10像素,则还是认为用户在做点击操作.如果移动距离超过了10像素,则取消后续事件监听函数的执行.*/ <script type="text/javascript"> function makeTouchableButton(ele) { if (!ele) { console.error

移动端多点触摸touchend 事件没有正常触发

移动端触屏事件主要是touchstart,touchmove,touchend 执行顺序touchstart(开始) - touchmove(移动) - touchend(结束) for (var i = 0; i < dom.length; i++) { dom[i].addEventListener('touchstart', function (e) { ..... }, false); dom[i].addEventListener('touchend', function (e) {

获取touchstart,touchmove,touchend 坐标

简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var _x= _touch.pageX; }); $('#id').on('touchmove',function(e) { var _touch = e.originalEvent.t

彻底解决低端安卓手机touchend事件不触发（考虑scroll）

本次移动端开发时遇见了安卓4.2系统不能触发touchend的问题,有以下需求. 1. 横滑轮播图 2.下拉刷新页面内容 3.body滚动条不能失效 开始在轮播图touchmove事件中阻止了浏览器默认行为,此时touchend事件可以触发. //拖拽轮播图 parentNode.addEventListener('touchmove',function(e) { e.preventDefault(); }) 然后复制了一份在下拉刷新事件中(此时下拉刷新也OK了) //下拉刷新代码 docume

解决移动端页面滚动后不触发touchend事件

解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. 可是,touchend事件在页面滚动时有个问题.在滚动完毕后,假设当前触点的位置所指的元素绑定了touchend事件,这时便会触发该元素的touchend事件,造成误操作. 解决方法 解决方法非常easy.就是在页面滚动时停止touchend事件冒泡.这样就能够防止触发touchend事件. 用法

jQuery的touchstart,touchmove,touchend的获取位置

$('#webchat_scroller').on('touchstart',function(e) { var touch = e.originalEvent.targetTouches[0]; var y = touch.pageY; }); $('#webchat_scroller').on('touchmove',function(e) { var touch = e.originalEvent.targetTouches[0]; var y = touch.pageY; }); $('