我们都知道 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. flutter开发体验

    flutter 介绍 flutter 是一种跨平台UI开发框架.这方面类似框架有: weex: Weex是一个可以使用现代化的 Web 技术开发高性能原生应用的框架. React Native: Re ...

  2. 如何去除List集合中的重复元素?

    一.问题由来 在实际开发的时候,我们经常会碰到这么一个问题:一个集合容器里面有很多重复的对象,里面的对象没有主键,或者说忽略主键,根据业务的需求,我们需要根据条件筛选出没有重复的对象. 二.去重操作 ...

  3. Kafka Producer源码解析一:整体架构

    一.Producer整体架构 Kafka Producer端的架构整体也是一个生产者-消费者模式 Producer线程调用send时,只是将数据序列化后放入对应TopicPartition的Deque ...

  4. YOLO v3算法介绍

    图片来自https://towardsdatascience.com/yolo-v3-object-detection-with-keras-461d2cfccef6 数据前处理 输入的图片维数:(4 ...

  5. SLS案例中心

    今日PV nginx日志查看今日的PV和昨日的对比,先通过count函数计算总的pv,再用compare函数得出今日的pv和昨日的同比. 通过单值图进行展示,显示值为20.381Mil,对比值为-2% ...

  6. ORB-SLAM: A Versatile and Accurate Monocular SLAM System 笔记(二)

    4. 自动地图初始化 地图初始化的目标是两个帧之间相对位姿来三角化一系列的点云(riangulate an initial set of map points),这个操作是独立与场景且不需要人为的干预 ...

  7. mysql中的函数总结

    mysql中常用日期时间函数 MySQL服务器中的三种时区设置: ①系统时区---保存在系统变量system_time_zone ②服务器时区---保存在全局系统变量global.time_zone ...

  8. 焦大:seo思维光年(上)检索的价值观

    http://www.wocaoseo.com/thread-55-1-1.html 检索的价值观是什么?最近很多人咨询我这个问题,因为在百度上根本找不到相关的资料,其实这个东西也是我自己总结的,比如 ...

  9. 解决Oracle12cr2自创建用户无法登录的问题

    说明: 下面创建是创建CDB本地用户,不是PDB应用程序用户,如果是PDB应用程序创建语法会不一样.下面介绍创建CDB本地用户. 创建表空空间 CREATE TABLESPACE YH datafil ...

  10. 教你如何在linux操作系统下玩【俄罗斯方块】高清+语音教程

    主讲人小冰QQ:986945193 新浪微博:http://weibo.com/mcxiaobing 百度贴吧:忆驹家族小冰 腾讯微博:http://t.qq.com/q986945193 高清视频 ...