jQuery实现长按按钮触发事件的方法_按钮触发事件 - CSDN文库

1.2k 浏览量更新于2023-05-29 评论收藏 47KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

jQuery实现长按按钮触发事件的方法实现长按按钮触发事件的方法

主要介绍了jQuery实现长按按钮触发事件的方法,可应用于手机端应用程序的开发中,非常具有实用价值,需要的朋

友可以参考下

本文实例讲述了jQuery实现长按按钮触发事件的方法。分享给大家供大家参考。具体分析如下：

现在手机端的快速发展，使许多手机手势需要制作到手机版的网页过程中

网上有许多长按按钮的插件，甚至仅仅是jQuery Mobile都有长按事件

但是基于种种的兼容性问题，

只使用jquery去实现长按动作，可以在手机端与电脑端保持极强的兼容性

一、基本目标一、基本目标

制作一个按钮，实质上一个100x100px的灰色背景的图层，长按达2s则图层里的文字从in变成out。如下图所示：

二、制作过程二、制作过程

代码如下：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

</head>

<body>

<div id="mydiv" style="width:100px; height:100px; background:#ddd;">out</div>

</body>

</html>

<script>

/*设置一个长按的计时器，如果点击这个图层超过2秒则触发，mydiv里面的文字从out变in的动作*/

var timeout ;

$("#mydiv").mousedown(function() {

timeout = setTimeout(function() {

$("#mydiv").text("in");

}, 2000);

});

$("#mydiv").mouseup(function() {

clearTimeout(timeout);

$("#mydiv").text("out");

});

$("#mydiv").mouseout(function() {

clearTimeout(timeout);

$("#mydiv").text("out");

});

</script>

实质上，长按的时间不应该过长，因为这有可能与手机系统的部分长按手势产生冲突，但也不宜过短，因为长按时间过短与点

击没有任何区别，

理论上，判断长按结束，在手机端上仅设置mouseup动作就可以，

但是，在PC上仅设置mouseup会有如下的bug：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38663608

粉丝: 4
资源: 948

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈