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

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

原创最新推荐文章于 2024-03-14 11:54:14 发布 · 7.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#github #插件 #函数

web前端学习专栏收录该内容

301 篇文章

订阅专栏

在使用jQuery.tap.js插件时，遇到了tap事件被触发两次的问题。本文通过分析DEMO和参考博客，探讨了该问题的出现原因及可能的解决方案。

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

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');

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>