1.移动端页面在PC上浏览时，限制宽度的方法：

2.移动端页面切换设备时自动刷新页面的方法：

3.touch事件

　　touchstart：当手指触摸屏幕时触发。通过addEventListener添加移动端事件。

　　touchemove：当手指在屏幕上滑动时，连续触发。

　　touchend：当手指从屏幕上移开时触发。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>test</title>

	<style>

		#box{

			border: 10px solid black;

			width: 300px;

			height: 300px;

			background-color: green;

		}

	</style>

</head>

<body>

	<div id="box"></div>

	<script>

	var box = document.getElementById("box");

	box.addEventListener("touchstart",function(event){

		event.preventDefault();

		box.style.backgroundColor = "pink";

	},false)

	box.addEventListener("touchmove",function(event){

		event.preventDefault();

		box.style.backgroundColor = "blue";

	},false)

	box.addEventListener("touchend",function(event){

		event.preventDefault();

		box.style.backgroundColor = "green";

	},false)

	</script>

</body>

</html>

4.touch事件对象

　　touches：当前屏幕上所有触摸点的列表

　　targetTouches：当前对象上所有触摸点的列表

　　changedTouches：涉及当前事件的所有触摸点的列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <title>test</title>

    <style>

    #box {

        border: 10px solid black;

        width: 200px;

        height: 200px;

        font-size: 20px;

        padding: 50px;

    }

    </style>

</head>

<body>

    <div id="box"></div>

    <script>

    // touch事件对象

    var box = document.getElementById("box");

    box.addEventListener("touchstart", function(event) {

        event.preventDefault();

        box.innerHTML = "当前屏幕上的手指"+event.touches.length+"<br/>当前对象上的手指"+event.targetTouches.length+"<br/>涉及当前事件的手指"+event.changedTouches.length;

    }, false)

    </script>

</body>

</html>

　　
　　

第六课 touch事件的更多相关文章

  1. Android学习第六弹之Touch事件的处理

    在移动开发过程当中,我们经常会遇到手势处理和事件触摸的情况,如果不了解整个事件的处理机制,对于开发的同学和码农是非常痛苦的,但是事件触摸的处理确实是一个非常复杂的过程,细讲起来,估计我都能讲迷糊,这里 ...

  2. Android Touch事件传递机制 一： OnTouch，OnItemClick（监听器），dispatchTouchEvent（伪生命周期）

      ViewGroup View  Activity dispatchTouchEvent 有 有 有 onInterceptTouchEvent 有 无 无 onTouchEvent 有 有 有 例 ...

  3. JavaScript学习日志（六）：事件

    这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...

  4. 【朝花夕拾】Android自定义View篇之（六）Android事件分发机制（中）从源码分析事件分发逻辑及经常遇到的一些“诡异”现象

    前言 转载请注明,转自[https://www.cnblogs.com/andy-songwei/p/11039252.html]谢谢! 在上一篇文章[[朝花夕拾]Android自定义View篇之(五 ...

  5. 自定义View系列教程07--详解ViewGroup分发Touch事件

    深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...

  6. webgl(three.js)3D光伏,3D太阳能能源,3D智慧光伏、光伏发电、清洁能源三维可视化解决方案——第十六课

    序: 能源是文明和发展的重要保障,人类命运不可避开的话题,无论是战争还是发展,都有它存在的身影.从石器时代到现代文明,人类的能源应用在进步,也在面临能源枯竭的危机与恐惧,而开发与应用可再生能源才是解决 ...

  7. UC浏览器中touch事件的异常记录

    以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...

  8. 移动端开发概览【webview和touch事件】

    作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...

  9. 手持设备点击响应速度，鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

随机推荐

  1. 微信小程序 教程之引用

    系列文章: 微信小程序 教程之WXSS微信小程序 教程之引用微信小程序 教程之事件微信小程序 教程之模板微信小程序 教程之列表渲染微信小程序 教程之条件渲染微信小程序 教程之数据绑定微信小程序 教程之 ...

  2. EmployeeTest

    package fourthf; public class EmployeeTest { public static void main(String[] args) { // TODO Auto-g ...

  3. Java学习笔记15

    do-while循环时while循环的变体语法如下:do{  // 循环体 语句(组);}while(循环继续条件); 如果循环中的语句至少需要执行一次,那么建议使用do-while循环. for循环 ...

  4. React的井字过三关（1）

    React的井字过三关(1) 本文系React官方教程的Tutorial: Intro To React的笔记.由笔者用ES5语法改写. 在本篇笔记中,尝试用React构建一个可交互的井字棋游戏. 开 ...

  5. adobe dreameaver cs5 禁止更新

    需要修改系统的host文件,将官方验证服务器全指向本机 用记事打开 C:\WINDOWS\system32\drivers\etc 下面的 host (没扩展名) 然后在后面添加 127.0.0.1 ...

  6. MyBatis源码分析（3）—— Cache接口以及实现

    @(MyBatis)[Cache] MyBatis源码分析--Cache接口以及实现 Cache接口 MyBatis中的Cache以SPI实现,给需要集成其它Cache或者自定义Cache提供了接口. ...

  7. SQL汉字转拼音函数-支持首字母、全拼

    SQL汉字转拼音函数-支持首字母.全拼 FROM :http://my.oschina.net/ind/blog/191659 作者不详 --方法一sqlserver汉字转拼音首字母 --调用方法 s ...

  8. Redhat6.4下安装Oracle10g

    Oracle10g_Redhat6.4 安装指南 文档说明 本文借鉴<Redhat_Linux_6.4下Oracle_10g安装配置手册><Redhat 6.4 安装 Oracle1 ...

  9. VS2010+Qt5.4.0 环境搭建(离线安装)

    原创作者:http://blog.csdn.net/solomon1558/article/details/44084969 前言 因项目需要Qt开发GUI,我根据网上资料及自己的经验整理了搭建vs2 ...

  10. CentOS系统IPTables防火墙中FTP规则设置

    时间 2016-04-21 10:32:15  虫虫开源 原文  http://www.sijitao.net/2403.html 主题 iptablesFTP防火墙 在设置ftp通过iptables ...