实质上,长按的时间不应该过长,因为这有可能与手机系统的部分长按手势产生冲突,但也不宜过短,因为长按时间过短与点击没有任何区别,

理论上,判断长按结束,在手机端上仅设置mouseup动作就可以,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> </head> <body>
<div id="mydiv" style="width:100px; height:100px; background:#ddd;">out</div>
</body>
</html> <script>
/*设置一个长按的计时器,如果点击这个图层超过2秒则触发,mydiv里面的文字从out变in的动作*/
var timeout ; $("#mydiv").mousedown(function() {
timeout = setTimeout(function() {
$("#mydiv").text("in");
}, 2000);
}); $("#mydiv").mouseup(function() {
clearTimeout(timeout);
$("#mydiv").text("out");
}); $("#mydiv").mouseout(function() {
clearTimeout(timeout);
$("#mydiv").text("out");
}); </script>

手机端js模拟长按事件(代码仿照jQuery)

代码编写:

$.fn.longPress = function(fn) {
var timeout = undefined;
var $this = this;
for(var i = 0;i<$this.length;i++){
$this[i].addEventListener('touchstart', function(event) {
timeout = setTimeout(fn, 800);
}, false);
$this[i].addEventListener('touchend', function(event) {
clearTimeout(timeout);
}, false);
}
}

代码使用:

$(select).longPress(function(){
alert(1);
});

JS 长按 移动端的更多相关文章

  1. Pomelo:网易开源基于 Node.js 的游戏服务端框架

    Pomelo:网易开源基于 Node.js 的游戏服务端框架 https://github.com/NetEase/pomelo/wiki/Home-in-Chinese

  2. 用pdf.js实现在移动端在线预览pdf文件

    用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js    官网地址:https://mozilla.github.io/pdf.js/ 2.配置    下载下来的文件包,就是一个demo ...

  3. 如何让Node.js运行在浏览器端

    Node.js又称服务端JavaScript.今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript.尽管这种方式有其局限性,但是还是可以用的. 1. ...

  4. js中模拟移动端长按效果

    我们都知道 js 是有onmousedown(鼠标按下事件)和onmouseup(鼠标抬起事件),刚开始我的思路是 鼠标抬起时间减去鼠标按下时间 var oDiv = document.getElem ...

  5. 移动端JS事件、移动端框架

    一.移动端的操作方式和PC端是不同的,移动端主要是用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: 1.手指放到屏幕上时触发   touchstart 2.手指放在屏幕上滑动式 ...

  6. 【js】手机浏览器端唤起app,没有app就去下载app 的方法

    这种功能的作用: 1.一般公司有自己的app,而app是需要不断有新用户涌入才能持续运营,达到不错的收入.就需要使用这种方式进行引入新的用户. 2.一些内容在网页端体验不好,或者一些功能需要app内才 ...

  7. 用H5和js写一个移动端自定义播放器

    前言 由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...

  8. js IndexedDB:浏览器端数据库的demo实例

    IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...

  9. js动态计算移动端rem

    在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @m ...

随机推荐

  1. unyielding 是否屈服与多线程 勿以恶小而为之 threads are a bad idea

    小结: 1. python的妥协 2. As we know, threads are a bad idea, (for most purposes). Threads make local reas ...

  2. 如何git revert merge commit?

    答: git revert -m <parent-number> <commit-id> (适用于merge操作的commit) 参考资料: https://blog.csdn ...

  3. Centos7.4服务器安装Laravel5.7详细讲解(2018-10-27)

    一.在阿里云或者腾讯云选择Centos7并购买服务器 二.安装宝塔面板和php运行环境 1.输入命令 yum install -y wget && wget -O install.sh ...

  4. mybatis bind exception

    springboot  项目  搜了半天 网上的解决方法千篇一律,最终问题 原因 ,yml 文件路径问题 mybatis: mapper-locations: classpath:com/yang/f ...

  5. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_05-SpringSecurityOauth2研究-搭建认证服务器

    3 Spring Security Oauth2研究 3.1 目标 本项目认证服务基于Spring Security Oauth2进行构建,并在其基础上作了一些扩展,采用JWT令牌机制,并自定 义了用 ...

  6. iReport报表生成html,pdf,xls,word工具类

    package com.report; import java.io.ByteArrayOutputStream;import java.io.File;import java.io.InputStr ...

  7. C++线程互斥、同步

     一.线程互斥 如果多个线程需要访问且可能修改同一个变量,那么需要加锁,保证同一时刻只有一个线程可以访问,这个动作即最小“原子操作” 方式1: 使用c++提供的类mutex,lock,unlock即可 ...

  8. 一百四十二:CMS系统之帖子详情页面布局

    定义一个404页面 <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  9. 123457123457#0#-----com.yuming.drawGame01--前拼后广--儿童画画游戏

    com.yuming.drawGame01--前拼后广--儿童画画游戏

  10. 【Leetcode_easy】830. Positions of Large Groups

    problem 830. Positions of Large Groups solution1: class Solution { public: vector<vector<int&g ...