JS 长按 移动端
实质上,长按的时间不应该过长,因为这有可能与手机系统的部分长按手势产生冲突,但也不宜过短,因为长按时间过短与点击没有任何区别,
理论上,判断长按结束,在手机端上仅设置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 长按 移动端的更多相关文章
- Pomelo:网易开源基于 Node.js 的游戏服务端框架
Pomelo:网易开源基于 Node.js 的游戏服务端框架 https://github.com/NetEase/pomelo/wiki/Home-in-Chinese
- 用pdf.js实现在移动端在线预览pdf文件
用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js 官网地址:https://mozilla.github.io/pdf.js/ 2.配置 下载下来的文件包,就是一个demo ...
- 如何让Node.js运行在浏览器端
Node.js又称服务端JavaScript.今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript.尽管这种方式有其局限性,但是还是可以用的. 1. ...
- js中模拟移动端长按效果
我们都知道 js 是有onmousedown(鼠标按下事件)和onmouseup(鼠标抬起事件),刚开始我的思路是 鼠标抬起时间减去鼠标按下时间 var oDiv = document.getElem ...
- 移动端JS事件、移动端框架
一.移动端的操作方式和PC端是不同的,移动端主要是用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: 1.手指放到屏幕上时触发 touchstart 2.手指放在屏幕上滑动式 ...
- 【js】手机浏览器端唤起app,没有app就去下载app 的方法
这种功能的作用: 1.一般公司有自己的app,而app是需要不断有新用户涌入才能持续运营,达到不错的收入.就需要使用这种方式进行引入新的用户. 2.一些内容在网页端体验不好,或者一些功能需要app内才 ...
- 用H5和js写一个移动端自定义播放器
前言 由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...
- js IndexedDB:浏览器端数据库的demo实例
IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...
- js动态计算移动端rem
在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @m ...
随机推荐
- Oracle scope中 spfile、memory、both 的区别
Oracle里面有个叫做spfile的东西,就是动态参数文件,里面设置了Oracle 的各种参数. 所谓的动态,就是说你可以在不关闭数据库的情况下,更改数据库参数,记录在spfile里面. 更改参数的 ...
- 机器学习 - 算法 - Xgboost 数学原理推导
工作原理 基于集成算法的多个树累加, 可以理解为是弱分类器的提升模型 公式表达 基本公式 目标函数 目标函数这里加入了损失函数计算 这里的公式是用的均方误差方式来计算 最优函数解 要对所有的样本的损失 ...
- websphere 英文版部署(更新)项目【我】
websphere 部署(更新)项目 首先在控制台页面依次点左侧,打开应用配置页面: 然后在右侧勾选我们要重新部署的项目,首先点上面的 停止 按钮,等项目停止后,再勾选项目,点上面的 更新 按钮(如 ...
- 38 Flutter仿京东商城项目 渲染结算页面商品数据
加群452892873 下载对应38课文件,运行方法,建好项目,直接替换lib目录 CartServices.dart import 'dart:convert'; import 'Storage.d ...
- PAT 甲级 1058 A+B in Hogwarts (20 分) (简单题)
1058 A+B in Hogwarts (20 分) If you are a fan of Harry Potter, you would know the world of magic ha ...
- thymeleaf中double/float格式化,四舍五入显示两位小数
private Float balance; 代码: <span class="A124_balance_num" th:text="${#numbers.form ...
- thinkphp3.2.2 没有定义数据库配置
出现这个问题,温习下tp配置多个数据库 <?php return array( //默认数据库 'DB_TYPE' => 'mysql', // 数据库类型 'DB_HOST' => ...
- 【ARTS】01_38_左耳听风-201900729~201900804
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- selenium3 web自动化测试框架 三:项目实战中PO模型的设计与封装
po模型设计思想 Page Object 模式主要是将每个页面设计为一个class,其中包含页面中的需要测试的元素(按钮,输入框,标题等),这样在Selenium测试页面中可以通过调取页面类来获取页面 ...
- Ubuntu linux 下的基本操作
防火墙相关: 关闭防火墙: ufw disable