同时支持长按和点击事件，无依赖版

<!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>Document</title>

</head>

<style>

    body {

        max-width: 540px;

        min-width: 320px;

    }

</style>

<body>

    <button id="longPress">longPress</button>

    <li class="longPress">longPress</li>

    <li class="longPress">longPress</li>

    <li class="longPress">longPress</li>

    <li class="longPress">longPress</li>

</body>

<script>

/**

 * 绑定长按事件，同时支持绑定点击事件

 * @param {dom} dom 需要绑定的dom元素

 * @param {fn} longPressCallBack 长按事件执行的方法

 * @param {fn} touchCallBack 点击事件执行的方法

 */

var longPress = function (dom, longPressCallBack, touchCallBack) {

    var timer = undefined;

    var isLongPress = false;

    var setEvent = function (e) {

          e.addEventListener('touchstart', function(event) {

                  timer = setTimeout(function () {

                    isLongPress = true

                  longPressCallBack && longPressCallBack(e);

                }, 500);

          }, false);

          e.addEventListener('touchmove', function(event) {

                 clearTimeout(timer);

          }, false);

          e.addEventListener('touchend', function(event) {

                  if (!isLongPress) touchCallBack && touchCallBack()

                  clearTimeout(timer);

                  isLongPress = false;

          }, false);

    }

    if (dom.length) {

        // 支持绑定多个元素

          for (var i = 0; i < dom.length; i++) {

            setEvent(dom[i])

        }

    } else {

        setEvent(dom)

    }

}

longPress(document.getElementById('longPress'), function () {

    console.log('longPress')

}, function () {

    console.log('touch');

});

[...document.querySelectorAll('.longPress')].forEach(function (e, i) {

    longPress(e, function () {

        console.log('longPress')

    }, function () {

        console.log('touch');

    });

});

</script>

</html>

jquery / zepto版本的实现，注意闭包的问题

$.fn.longPress = function(callback) {

  var timer = undefined;

  var $this = this;

  // 支持绑定多个元素

  for (var i = 0; i < $this.length; i++) {

    var self = $this[i];
     // 注意这里的闭包问题

    (function(e){

      self.addEventListener('touchstart', function(event) {

        timer = setTimeout(function () {

          callback(e);

        }, 500);

      }, false);

      self.addEventListener('touchmove', function(event) {

        clearTimeout(timer);

      }, false);

      self.addEventListener('touchend', function(event) {

        clearTimeout(timer);

      }, false);

    })($this[i]);

  }

}

// 调用示例

$(".card-con li").longPress(function(e){

   console.log(e, $(e).index());

});

知乎上找到的原生实现：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title></title>

    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

</head>

<body>

<div style="width:100%;">

    <div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px">长按我</div>

</div>

<script>

var timeOutEvent=0;

$(function(){

    $("#touchArea").on({

        touchstart: function(e){

            timeOutEvent = setTimeout("longPress()",500);

            e.preventDefault();

        },

        touchmove: function(){

                    clearTimeout(timeOutEvent);

                timeOutEvent = 0;

        },

        touchend: function(){

            clearTimeout(timeOutEvent);

            if(timeOutEvent!=0){

                alert("你这是点击，不是长按");

            }

            return false;

        }

    })

});

function longPress(){

    timeOutEvent = 0;

    alert("长按事件触发发");

} 

</script>

</body>

</html>

JS 手势长按代码的更多相关文章

  1. H5案例分享：JS手势框架 —— Hammer.js

    JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...

  2. three.js 3d三维网页代码加密的实现方法

    http://www.jiamisoft.com/blog/17827-three-js-3dsanweiwangyejiami.html https://www.html5tricks.com/ta ...

  3. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  4. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  5. Js弹性漂浮广告代码

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  6. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  7. 如何写兼容浏览器和Node.js环境的Javascript代码

    如果有打开过jQuery的源码(从1.11及以后),或者Vue.js.React.js的源码,都会在文件的前面看见这样一段代码: ( function( global, factory ) { &qu ...

  8. 常用的JS页面跳转代码调用大全

    一.常规的JS页面跳转代码 1.在原来的窗体中直接跳转用 <script type="text/javascript"> window.location.href=&q ...

  9. 基于 Koa平台Node.js开发的KoaHub.js连接打印机的代码

    最近好多小伙伴都在做微信商城的项目,那就给大家分享一个基于 Koa.js 平台的 Node.js web 开发的框架连接微信易联云打印机接口的代码,供大家学习.koahub-yilianyun 微信易 ...

随机推荐

  1. 利用js将图片地址进行转义

    利用js将图片地址进行转义 在业务中经常需要将图片从后台获取,然后在前台显示.其中后台存取图片主要分为两种,一种是数据库中获取图片的地址,第二种是存取图片内容的信息.这次主要是前台代码处理第一种情况. ...

  2. 计蒜客 17119.Trig Function-切比雪夫多项式+乘法逆元 (2017 ACM-ICPC 亚洲区（西安赛区）网络赛 F)

    哈哈哈哈哈哈哈哈哈哈哈哈,终于把这道题补出来了_(:з」∠)_ 来写题解啦. _(:з」∠)_ _(:з」∠)_ _(:з」∠)_ _(:з」∠)_ _(:з」∠)_ 哈哈哈哈哈哈,从9月16日打了这 ...

  3. BFS+最小生成树+倍增+LCA【bzoj】4242 水壶

    [bzoj4242 水壶] Description JOI君所居住的IOI市以一年四季都十分炎热著称. IOI市是一个被分成纵H*横W块区域的长方形,每个区域都是建筑物.原野.墙壁之一.建筑物的区域有 ...

  4. 探究堆喷射（heap spray）

    博客园的自动保存系统真心不咋地,写的差不多的文章蓝屏之后就没有了,醉了! 浏览器是互联网世界最主要的软件之一,从IE6到IE11安全攻防在不断升级,防御措施的实施促使堆喷射技巧不断变化.写这篇博文想好 ...

  5. POJ 3686 The Windy's （费用流）

    [题目链接] http://poj.org/problem?id=3686 [题目大意] 每个工厂对于每种玩具的加工时间都是不同的, 并且在加工完一种玩具之后才能加工另一种,现在求加工完每种玩具的平均 ...

  6. [CF3B]Lorry

    题目大意: 有$n(n\leq 10^5)$个物品,背包的容量为$m(m\leq 10^9)$.每个物品有重量$w_i(w_i\in\{1,2\})$和价值$v_i(v_i\leq 10^4)$.问最 ...

  7. iOS 自定义字体设置

    有时候客户都要求使用方正兰亭刊黑字体,可是iOS没有自带这个字体,肿么办 ,只能自己自定义字体了,下面是自定义字体的几个重要步骤: 1.下载字体资源文件(.ttf或.otf格式的文件) 比如说你要使用 ...

  8. /usr/local/lib/libz.a: could not read symbols: Bad value(64 位 Linux)

    /usr/local/lib/libz.a: could not read symbols: Bad value(64 位 Linux) /usr/bin/ld: /usr/local/lib/lib ...

  9. sql server 2008 R2 数据库文件大小限制

    select @@version SQL2005 分五个版本,如下所列: 1.Enterprise(企业版) 2.Development(开发版) 3.Workgroup,(工作群版) 4.Stand ...

  10. ubifs笔记

    第1章 UBIFS UBIFS不是工作在块在设备之上,所以UBIFS不能用于MMC之类的设备. 与传统的flash文件不同,UBIFS不是工作是块设备之上.传统的flash文件系统(如Jffs2)工作 ...