JS 长按 移动端
2024-08-30 21:25:44
实质上,长按的时间不应该过长,因为这有可能与手机系统的部分长按手势产生冲突,但也不宜过短,因为长按时间过短与点击没有任何区别,
理论上,判断长按结束,在手机端上仅设置mouseup动作就可以,
<!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>
手机端js模拟长按事件(代码仿照jQuery)
代码编写:
$.fn.longPress = function(fn) {
var timeout = undefined;
var $this = this;
for(var i = 0;i<$this.length;i++){
$this[i].addEventListener('touchstart', function(event) {
timeout = setTimeout(fn, 800);
}, false);
$this[i].addEventListener('touchend', function(event) {
clearTimeout(timeout);
}, false);
}
}
代码使用:
$(select).longPress(function(){
alert(1);
});
最新文章
- Android开发学习之路-动态高斯模糊怎么做
- AGS中通过FeatureServer插入数据失败、插入数据在WMTS请求中无法显示以及version概念的讨论
- 十一个行为模式之观察者模式(Observer Pattern)
- TListView Header重绘和高度设置
- IOS设计模式浅析之简单工厂模式(SimpleFactory)
- label
- fineuploader 上传jquery 控件
- HDU 4727	The Number Off of FFF 2013年四川省赛题
- Android 通信机制Message、Handler 的用法
- python自学笔记(十)语句与数据结构应用
- 深入探讨MFC消息循环和消息泵
- HDFS 上传文件的不平衡,Balancer问题是过慢
- JAVA基础--异常
- 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解!
- js数据校验插件
- HBase笔记4(调优)
- k-means算法 - 数据挖掘算法(5)
- Nginx、HAProxy、LVS三者的优缺点
- Perfect hashing (And Minimal perfect hashing)
- activit流程引擎启动流程报错
热门文章
- 用了pm2之后,如何让console.log(&#39;..&#39;)出现在控制台
- SQL-W3School-函数:SQL FIRST() 函数
- [Java复习] 多线程 并发 JUC 补充
- KL距离(相对熵)
- CentOS7下搭建Tomcat服务器
- @Qualifier is not applicable for constructor
- iOS-MJRefresh框架
- 【MM系列】在SAP里查看数据的方法
- 【VS开发】Windows平台下Makefile学习笔记
- eNSP——利用三层交换机实现VLAN间路由