网站首页 » 前端开发 » JavaScript » JavaScript 实现长按功能(满满的套路)
上一篇:
下一篇:

JavaScript 实现长按功能(满满的套路)

前言

在某种特定场景下,有时候我们需要用到长按功能,比如长按弹出操作界面,不过,在 PC 端的话就用得比较少,本文主要是针对移动端操作的,毕竟移动端手势操作是必不可少。

在开始之前我们先来看看基本的 HTML 代码:

简单得…..
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 实现长按效果 - 云库前端</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<button id="btn">长按我</button>
</body>
</html>

现在我们来看看如何实现移动端的长按效果。

长按之旅

套路一

看过来
var btn = document.getElementById("btn");
longPressFn(btn);

function longPressFn (target){
  var timer = null;
  target.addEventListener("touchstart",function(){
    timer = setInterval(handler,300);
  });

  target.addEventListener("touchend",function(){
    clearInterval(timer);
  });
}

// 这里就是放你的业务代码
function handler(){
  console.log("你长按了我");
}

这是一种思路,适合用于按下屏幕不松手时作相应的操作,手指抬起后取消相关的操作。

套路二

看这里
var btn = document.getElementById("btn");
longPressFn(btn);

function longPressFn (target){
  var timer = null;
  target.addEventListener("touchstart",function(){
    timer = setTimeout(handler,1000);
  });

  target.addEventListener("touchend",function(){
    clearTimeout(timer);
  });
}

// 这里就是放你的业务代码
function handler(){
  console.log("你长按了我");
}

这个就是长按多少秒后执行相关操作,时间可以自己改。如果长按时间没达到设定值,处理函数也不会触发。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-long-press/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END