手机页面touch触摸事件
请看示例:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main-div{
font-size:4rem;
width:100%;
}
</style>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
</head>
<body>
<div class="main-div">
hello wor1ld!
</div>
</body>
</html> <script type="text/javascript">
$(".main-div").bind("touchstart", function (e) { //触摸开始的时候触发
//e.preventDefault(); //阻止出现滚动条
$(this).css("background-color", "#e5e5e5");
}).bind("touchend", function (e) { //手指在屏幕上滑动的时候触发
$(this).css("background-color", "white");
}).bind("touchmove", function (e) { //触摸结束的时候触发
$(this).css("background-color", "white");
});
</script>
延伸阅读文章: http://www.w3school.com.cn/jquerymobile/jquerymobile_events_touch.asp
手机页面touch触摸事件的更多相关文章
- touch触摸事件
事件对象 事件对象是用来记录一些事件发生时的相关信息的对象.事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁! W3C DOM把事件对象作 ...
- 关于windows phone 8.1系统手机对html5触摸事件的支持情况
近日购入一部微软Lumia 640手机,目的主要就是为了测试年中开发完成的响应式移动web项目,同时也为了将来升级win10 mobile系统.由于我们的项目目前只考虑支持IOS与Android系统, ...
- Touch事件 移动端touch触摸事件
<!-- HTML5 --> <!DOCTYPE html> <html> <head> <title>TouchEvent测试</t ...
- 移动端touch触摸事件(滑动效果和手势操作)
一.定义 ①touch是移动端的触摸事件,而且是一组事件,主要有以下事件: touchstart 事件:当手指触摸屏幕的时候触发 touchmove 事件:当手指在屏幕来回滑动的时候触发 touche ...
- 移动端-js触摸事件
开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...
- 移动端WEB开发,click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- web开发,click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端JS 触摸事件基础
一.手机上的触摸事件 基本事件: touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指从屏幕上移开时触发 ...
- 移动端js触摸事件大全
一.手机上的触摸事件 基本事件: touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指从屏幕上移开时触发 下面这 ...
随机推荐
- Android UI 绘制过程浅析(五)自定义View
前言 这已经是Android UI 绘制过程浅析系列文章的第五篇了,不出意外的话也是最后一篇.再次声明一下,这一系列文章,是我在拜读了csdn大牛郭霖的博客文章<带你一步步深入了解View> ...
- java技术 spring 配置
spring 的IOC是反射注入,用来管理对象的创建与销毁.一般使用都是在启动的web服务器的时候就创建了对象,可以选择自动装配对象管理,将对象引用实现与引用分开.采用的xml配置方式.及大减少了各个 ...
- 2.2 ARM处理器工作模式
ARM Architecture Reference Manual Arm 指令框架手册 种工作模式 Processor mode Mode number Description User usr 0 ...
- JAVA Socket 编程学习笔记(一)
1. Socket 通信简介及模型 Java Socket 可实现客户端--服务器间的双向实时通信.java.net包中定义的两个类socket和ServerSocket,分别用来实现双向连接的cli ...
- AX7: CREATE NEW PACKAGE\MODEL
To create a new package\model on AX first you should understand the concept of Packages and Models o ...
- Ajax发送异步请求(四步操作)
1.第一步(得到XMLHttpRequest) *ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!! *得到XMLHttpRequest >大多数浏 ...
- Windows 10下通过蓝牙连接iPhone个人热点进行共享上网
出处:qiuyi21.cnblogs.com 1.iPhone开启个人热点 在iPhone中打开蓝牙,然后进入“个人热点”并打开开关,如果提示热点发射方式请选择蓝牙那项,然后停留在“个人热点”界面并且 ...
- 《UNIX/Linux网络日志分析与流量监控》新书发布
本书从UNIX/Linux系统的原始日志(Raw Log)采集与分析讲起,逐步深入到日志审计与计算机取证环节.书中提供了多个案例,每个案例都以一种生动的记事手法讲述了网络遭到入侵之后,管理人员开展系统 ...
- 监控数据库运行 - MS SQL 日常维护管理常用脚本(二)
查看数据库登录名信息 use mastergoSELECT name AS LoginName , dbname AS DefaultDB , createdate AS CreateDate, up ...
- FPS中受伤UI在VR游戏中的实现思路
FPS中受伤UI在VR游戏中的实现思路 希望实现的效果 这几天一直在尝试各种解决方案,现在算是不完美的解决啦,记录一下心路历程,思路有了算法都比较简单. V_1 玩家胶囊体指向的方向作为正方向,计算出 ...