我们都知道 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. 【支付宝SDK】沙箱调试,以及遇到的坑

    from rest_framework.views import APIView from alipay import AliPay, DCAliPay, ISVAliPay from django. ...

  2. Swing记事本项目

    具备记事本功能:文件保存.文件打开.复制.黏贴.撤销.全选.字体修改.字体颜色修改.背景颜色修改

  3. Ncdu强大的磁盘查看命令

    简介 项目地址: https://dev.yorhel.nl/ncdu Ncdu (NCurses Disk Usage) 是一个基于 Ncurses 库的 du 命令的界面.它通过大家熟知的 du ...

  4. Linux环境下安装JDK8

    Linux环境下搭建Java项目运行环境,首先要安装JDK,安装JDK8的步骤如下: 1 下载JDK安装包 下载地址:http://www.oracle.com/technetwork/java/ja ...

  5. 结对作业:四则运算(Java+JavaFX)

    一.简介 此程序是一个可自动生成,计算小学四则运算题目的项目. Github地址:https://github.com/czmDeRepository/SoftwareWork/tree/master ...

  6. 使用dd命令快速生成大文件或者小文件

    使用dd命令快速生成大文件或者小文件 需求场景: 在程序的测试中有些场景需要大量的小文件或者几个比较大的文件,而在我们的文件系统里一时无法找到那么多或者那么大的文件,此时linux的dd命令就能快速的 ...

  7. 区块链入门到实战(20)之以太坊(Ethereum) – 虚拟机(E.V.M.)

    作用:执行智能合约代码的引擎 以太坊(Ethereum)虚拟机是执行智能合约代码的引擎. 可以用某种语言,例如Solidity语言,开发智能合约程序,编译成以太坊(Ethereum)虚拟机支持的字节码 ...

  8. .Net MongoDB批量修改集合中子集合的字段

    环境:.Net Core 3.1 (需要导入.Net MongoDB的驱动) 模型 /// <summary> /// 收藏 /// </summary> public cla ...

  9. jQuery源码分析系列(三)Sizzle选择器引擎-下

    选择函数:select() 看到select()函数,if(match.length === 1){}存在的意义是尽量简化执行步骤,避免compile()函数的调用. 简化操作同样根据tokenize ...

  10. mybatis批量添加数据的三种方式

    原文地址:https://www.cnblogs.com/gxyandwmm/p/9565002.html