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);
}

原文地址:https://www.cnblogs.com/menglong1214/p/10469863.html

时间: 2024-10-14 13:26:27

js中模拟移动端长按效果的相关文章

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

原文链接:https://blog.csdn.net/jal517486222/article/details/83147761 /* *功能: 模拟form表单的提交 *参数: URL 跳转地址 PARAMTERS 参数 */ function Post(URL, PARAMTERS) { //创建form表单 var temp_form = document.createElement("form"); temp_form.action = URL; //如需打开新窗口,form的

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

<script> var arr=new Array(); arr[0]="url(images/city.jpg)"; arr[1]="url(images/desert.jpg)"; arr[2]="url(images/flower.jpg)"; var i=0; function changeimage() { if(i==3) { i=0; } var div=document.getElementById("ap

在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doctype html> <html> <header> <meta charset="utf-8"> <title>placeholder</title> <style type="text/css"

hammer.js实现移动端的拖放效果

hammer.js可以实现移动端的多种触摸效果.详细可以点击http://www.cnblogs.com/iamlilinfeng/p/4239957.html 不过发现hammer.js实现功能时,只能是原生js,jquery代码在hammer中不起效果. 一.引入hammer.js 下载http://hammerjs.github.io/ <script type="text/javascript" src="js/hammer.min.js">&l

node.js中net网络模块TCP服务端与客户端的使用

node.js中net模块为我们提供了TCP服务器和客户端通信的各种接口. 一.创建服务器并监听端口 const net = require('net'); //创建一个tcp服务 //参数一表示创建服务的一些配置 //参数二表示 事件 'connection' 监听回调函数 let server = net.createServer({ //表示是否允许一个半开的TCP连接,默认为false allowHalfOpen: false, //一旦来了连接,是否暂停套接字,默认为false pau

【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key=value&key=value"            用&可以实现传递多个值. 通过这种方式就把要传递的值传到要跳转的页面去了. 2.跨页面取值: 在跳转到的页面的C#代码服务端进行取值 用:  string value = Request["key"]; 二.

JS中图片飞飞效果

当鼠标在界面上移动的时候,后面有一连串的图片跟随者一起飘动,效果如下: 实现的基本思想:准备五个img标签,为了方便控制都放在一个div里面,设置div的定位方式为 fixed,设置成这中定位方式主要是为了解决在页面出现滚动条的情况下,图片还能够跟随鼠标移动.然后再鼠标移动的时候,延时给每一个图片设置定位的left和top距离就OK了.HTML和CSS代码如下: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head

js中startWith、endWith效果函数

JavaScript采用正则表达式实现startWith.endWith效果函数 String.prototype.startWith=function(str){       var reg=new RegExp("^"+str);       return reg.test(this);        } String.prototype.endWith=function(str){       var reg=new RegExp(str+"$");     

js 实现淘宝轮无缝播图效果,带完整解析版源码(陆续更新中.....)

前言: ????????本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. ????????本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: HTML需求 1. 首先要有一个可视区域(banner) 2. 在可视区域(banner)下有一个存放图片的区域(imgs) 3. 在可视区域(banner)下还要有一个存放小圆点的区域(dots) 4. 在可视区域(banner)下还要有一个存放按钮的区域 (arrow) CSS需求 1. 可视