jQuery tap js插件tap事件执行两次问题

最新推荐文章于 2024-03-14 11:54:14 发布

绿萝哥哥

最新推荐文章于 2024-03-14 11:54:14 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/uffgfbft/article/details/83759776

本文详细介绍了 jQuery Tap.js 插件的工作原理，该插件用于处理触摸设备上的点击事件，确保了在不同触摸阶段事件的一致性和准确性。通过示例代码展示了如何在触摸开始和结束时获取并比较事件属性，实现精准的触摸点击功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

jQuery.tap.js

/** * Author: Sergey Bondarenko (BR0kEN) * E-mail: broken@propeople.com.ua * Github: https://github.com/BR0kEN-/jTap * Updated: May 27, 2014 * Version: 0.2.8 */(function($, _) {  'use strict';  /**   * @param (object) ev - extending object, which contain event properties.   *  - (string) start - start event depending of @isTap.   *  - (string) end - start event depending of @isTap.   */  var ev = {    start: 'touchstart mousedown',    end: 'touchend mouseup'  };  $.event.special[_] = {    setup: function() {      $(this).off('click').on(ev.start + ' ' + ev.end, function(e) {        /**         * Adding jQuery event to @ev object depending of @isTap.         *         * Attention: value of this property will change two time         * per event: first time - on start, second - on end.         */        ev.E = e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0] : e;      }).on(ev.start, function(e) {        /**         * Function stop if event is simulate by mouse.         */        if (e.which && e.which !== 1) {          return;        }        /**         * Extend @ev object from event properties of initial phase.         */        ev.target = e.target;        ev.time = new Date().getTime();        ev.X = ev.E.pageX;        ev.Y = ev.E.pageY;      }).on(ev.end, function(e) {        /**         * Compare property values of initial phase with properties         * of this, final, phase. Execute event if values will be         * within the acceptable and set new properties for event.         */        if (          ev.target === e.target &&          ((new Date().getTime() - ev.time) < 750) &&          (ev.X === ev.E.pageX && ev.Y === ev.E.pageY)        ) {          e.type = _;          e.pageX = ev.E.pageX;          e.pageY = ev.E.pageY;          $.event.dispatch.call(this, e);        }      });    },    /**     * Disassembling event.     */    remove: function() {      $(this).off(ev.start, false).off(ev.end, false);    }  };  $.fn[_] = function(fn) {    return this[fn ? 'on' : 'trigger'](_, fn);  };})(jQuery, 'tap');
  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
67
68
69
70
71
72
73
74
75
76
77
78

DEMO

参考http://www.cnblogs.com/shenbin/archive/2013/03/21/2973858.html

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <script type="text/javascript" src="js/jquery-2.1.4.js" ></script>        <script type="text/javascript" src="js/jquery.tap.js" ></script>        <title></title>        <style type="text/css">            div{                width: 300px;                height: 300px;                background: red;            }        </style>        <script type="text/javascript">            $(function(){               $("div").on('click',function(){                 console.log(1);               });            });            $(function(){               $("div").on('tap',function(){                 console.log(2);                 return false;  //否则会执行两次               });            });        </script>    </head>    <body>        <div></div>    </body></html>
  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