js中模拟移动端长按效果
我们都知道 js 是有onmousedown(鼠标按下事件)和onmouseup(鼠标抬起事件),刚开始我的思路是 鼠标抬起时间减去鼠标按下时间
var oDiv = document.getElementById('div1');
var timer1;
var timer2;
oDiv.onmousedown = function () {
timer1 = new Date();
}
oDiv.onmouseup = function () {
timer2 = new Date();
var timer3 = timer2.getTime() - timer1.getTime();
if (timer3 > 1000)
alert('aa');
}
}
这么写倒是也能实现 但是 必须要 鼠标抬起才能触发(鼠标按住10秒不松开,也不会出现效果。。。实际测试效果很不爽,感觉特别扭)。这个跟咱们安卓的使用感觉是不同的。。。安卓的那个长按 是 按住开始计时到时间就立马出现效果,
于是最终改版如下:
var oDiv = document.getElementById('div1')
var myVar;
oDiv.onmousedown = function () {
myVar = setTimeout(function () {
alert('aa');
}, 1000);
}
oDiv.onmouseup = function () {
clearTimeout(myVar);
}

js中模拟移动端长按效果的更多相关文章
- 【转】js 中导出excel 较长数字串会变为科学计数法
[转]js 中导出excel 较长数字串会变成科学计数法 在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串 ...
- js 中导出excel 较长数字串会变成科学计数法
在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串转换成 科学计数法.现在网上找到解决方案之一: (在数字串 ...
- js 中导出excel 较长数字串会变成科学计数法(转载)
在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串转换成 科学计数法.现在网上找到解决方案之一: (在数字串 ...
- 在JS中模拟表单的post提交,进行页面的跳转
原文链接:https://blog.csdn.net/jal517486222/article/details/83147761 /* *功能: 模拟form表单的提交 *参数: URL 跳转地址 P ...
- js中网页图片自动更换的效果
<script> var arr=new Array(); arr[]="url(images/city.jpg)"; arr[]="url(images/d ...
- JS中关于 一个关于计时器功能效果的实现
optionSearch(); function optionSearch() { //定义一个清除计时器的变量 var timer = null; //自选标题区域 $("#optiona ...
- js中模拟a标签的点击事件
var a = document.createElement('a'); a.target = "_blank"; a.href = "personal"; a ...
- JS 中的自定义事件和模拟事件
在 JS 中模拟事件指的是模拟 JS 中定义的一些事件,例如点击事件,键盘事件等. 自定义事件指的是创建一个自定义的,JS 中之前没有的事件. 接下来分别说一下创建这两种事件的方法. 创建自定义事件 ...
- 谈一谈原生JS中的【面向对象思想】
[重点提前说:面向对象的思想很重要!] 最近开始接触学习后台的PHP语言,在接触到PHP中的面向对象相关思想之后,突然想到之前曾接触的JS中的面向对象思想,无奈记性太差, ...
随机推荐
- Dubbo系列之 (四)服务订阅(1)
辅助链接 Dubbo系列之 (一)SPI扩展 Dubbo系列之 (二)Registry注册中心-注册(1) Dubbo系列之 (三)Registry注册中心-注册(2) Dubbo系列之 (四)服务订 ...
- JavaScript学习系列博客_7_JavaScript中的逻辑运算符、三元运算符
逻辑运算符 ! 非 - 非运算可以对一个布尔值进行取反,true变false false边true - 当对非布尔值使用!时,会先将其转换为布尔值然后再取反 - 我们可以利用 !! 来将其他的数据类型 ...
- umount 时目标忙解决办法
[root@node2 ~]# umount /var/lib/ceph/osd/ceph- umount: /var/lib/ceph/osd/ceph-:目标忙. (有些情况下通过 lsof() ...
- rcp
rcp的命令 rcp,远程文件复制.rcp既可以在本地主机和远程主机之间进行文件复制,也可以用于在两个远程主机之间进行文件复制.除了复制文件外,rcp也可以用于目录复制,只需要加参数-r. rcp的命 ...
- v-html渲染富文本图片宽高问题
v-html渲染富文本v-html是用来渲染html的节点及字符串的,但是渲染后富文本里的图片宽高会溢出所在div的区域但是使用css直接给img是没有办法设置img的宽高的,需要使用深层级来给img ...
- 最强U盘修复工具
今天清理东西,本来就要把陪伴我5年多的东芝U盘扔掉了,我说试试能不能修复一下 然后就是下载各种U盘修复工具,可是我的驱动显示正常,就是在磁盘管理里边显示无媒体,其实就是电脑不知道这是个神马玩意,使用U ...
- 从零开始的SpringBoot项目 ( 四 ) 整合mybatis
一.创建一个SpringBoot项目 从零开始的SpringBoot项目 ( 二 ) 使用IDEA创建一个SpringBoot项目 二.引入相关依赖 <!--mysql数据库驱动--> & ...
- 每天定时下载gfs资料shell脚本
在数值天气预报应用中,经常需要下载一些输入资料,美国ncep的gfs资料是常用的一种分析场资料.业务运行,需要每天定时从ncep网站上下载,所以写了一个Shell脚本实现这一功能.脚本内容如下: #! ...
- Git使用感悟
前言 分支介绍 我们现在开发的分支一般是这样的(基于上面那张图片的): master:上线用的 dev:开发用的 featature_xxx:开发用的 test:测试用的 hotfix:修复bug的 ...
- Promise、Generator,Async/await
我们知道JavaScript是单线程语言,如果没有异步编程非得卡死. 以前,异步编程的方法有下面四种 回调函数 事件监听 发布/订阅 Promise对象 现在据说异步编程终极解决方案是——async/ ...