我们都知道 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中模拟移动端长按效果的更多相关文章

  1. 【转】js 中导出excel 较长数字串会变为科学计数法

    [转]js 中导出excel 较长数字串会变成科学计数法 在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串 ...

  2. js 中导出excel 较长数字串会变成科学计数法

    在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串转换成 科学计数法.现在网上找到解决方案之一: (在数字串 ...

  3. js 中导出excel 较长数字串会变成科学计数法(转载)

    在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串转换成 科学计数法.现在网上找到解决方案之一: (在数字串 ...

  4. 在JS中模拟表单的post提交,进行页面的跳转

    原文链接:https://blog.csdn.net/jal517486222/article/details/83147761 /* *功能: 模拟form表单的提交 *参数: URL 跳转地址 P ...

  5. js中网页图片自动更换的效果

    <script> var arr=new Array(); arr[]="url(images/city.jpg)"; arr[]="url(images/d ...

  6. JS中关于 一个关于计时器功能效果的实现

    optionSearch(); function optionSearch() { //定义一个清除计时器的变量 var timer = null; //自选标题区域 $("#optiona ...

  7. js中模拟a标签的点击事件

    var a = document.createElement('a'); a.target = "_blank"; a.href = "personal"; a ...

  8. JS 中的自定义事件和模拟事件

    在 JS 中模拟事件指的是模拟 JS 中定义的一些事件,例如点击事件,键盘事件等. 自定义事件指的是创建一个自定义的,JS 中之前没有的事件. 接下来分别说一下创建这两种事件的方法. 创建自定义事件 ...

  9. 谈一谈原生JS中的【面向对象思想】

           [重点提前说:面向对象的思想很重要!]         最近开始接触学习后台的PHP语言,在接触到PHP中的面向对象相关思想之后,突然想到之前曾接触的JS中的面向对象思想,无奈记性太差, ...

随机推荐

  1. python基本数据类型(二)

    列表   list 1.list.append( p_object) ----  增加列表参数(向后追加) list=['lifei','liuhua','laochai'] list.append( ...

  2. WeakHashMap的应用场景

    WeakHashMap是啥: WeakHashMap和HashMap都是通过"拉链法"实现的散列表.它们的源码绝大部分内容都一样,这里就只是对它们不同的部分就是说明.  WeakR ...

  3. 实现图像的二值化(java+opencv)

    书里的解释: 其他的没找到什么资料,直接参考百度百科 https://baike.baidu.com/item/%E5%9B%BE%E5%83%8F%E4%BA%8C%E5%80%BC%E5%8C%9 ...

  4. .Net Core中的诊断日志DiagnosticSource讲解

    前言     近期由于需要进行分布式链路跟踪系统的技术选型,所以一直在研究链路跟踪相关的框架.作为能在.Net Core中使用的APM,SkyWalking自然成为了首选.SkyAPM-dotnet是 ...

  5. MongoDB最新4.2.7版本三分片集群修改IP实操演练

    背景 重新组网,需要对现有MongoDB分片集群服务器的IP进行更改,因此也需要对MongoDB分片集群的IP也进行相应的更新,而MongoDB分片集群的IP修改不能单纯的通过配置来进行,需要一番折腾 ...

  6. 使用 gopacket 进行数据包捕获,注入和分析

    原文链接:https://www.devdungeon.com/content/packet-capture-injection-and-analysis-gopacket 接口文档:https:// ...

  7. Java 类初始化和实例初始化过程

    1.类初始化过程 2.实例初始化过程 3.方法的重写

  8. Manico--自定义应用快速切换

    快速切换应用的app,使用非常频繁,奈何还是没有钱! 这玩意儿虽然免费,但是时不时跳一个弹框让你购买,也是够烦的,然后我们正好利用逆向工具,对着玩意儿进行破解,让它不再弹框! 下载安装Hopper D ...

  9. Spring 的Controller 是单例or多例

    Spring 的Controller 是单例or多例 你什么也不肯放弃,又得到了什么? 背景:今天写代码遇到一个Controller 中的线程安全问题,那么Spring 的Controller 是单例 ...

  10. 焦大:以后seo排名核心是用户需求点的挖掘

    http://www.wocaoseo.com/thread-61-1-1.html 给我一个用户需求点,我便能拗动任何seo排名.-焦大 前不久我看博客上有人留言咨询能否做seo这个词的排名,对于这 ...