JS 手勢長按代碼

本文轉載自查看原文 2017-12-25 16:13 1312 JavaScript / jQuery

同時支持長按和點擊事件，無依賴版

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS案例 - 基於vue的移動端長按手勢 WKWebView 屏蔽長按手勢 - iOS IOS開發中長按的手勢事件編程 IOS 關於tableview中cell的長按手勢 ios開發-給cell添加長按手勢 UICollectionView添加長按手勢,長按選中某一個item iOS手勢移動端手勢庫Hammer.js—增強touch事件或手勢 js實現移動端圖片預覽：手勢縮放，手勢拖動，雙擊放大... iOS 手勢操作：拖動、捏合、旋轉、點按、長按、輕掃、自定義