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. 使用Jquery.AJAX方法和PHP后台数据交互小结

    使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...

  2. ios官方菜单项目重点剖析附项目源码

    原版教程:https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift ...

  3. eclipse使用sublime配色（转）

    转自 Eclipse设置类似Sublime Text 编辑区皮肤,风格,颜色 1.首先打开eclipse 2.help -> Install New SoftWare  3.点击 Add 在Na ...

  4. Struts2--属性设置方式

    Struts2自动获取/设置数据的方式一共分为两种 属性驱动(FieldDriven) 模型驱动(ModelDriven) 属性驱动 属性又分为两种: |- 基本数据类型 |- JavaBean属性类 ...

  5. node.js

    学习网址:http://www.jdon.com/idea/nodejs/

  6. [c#基础]关于const和readonly常见的笔试题剖析

    引言 有那么几天没更新博客了,发现到了不得不写的地步,总是有那么个声音在强迫自己,虽然工作很累,但是有些东西不写出来,不能原谅自己.今天为什么总结这两个关键字的区别,总觉得这两个关键字的用法用的太习惯 ...

  7. rcu机制

    转载自:再谈Linux内核中的RCU机制-MagicBoy2010-ChinaUnix博客 http://blog.chinaunix.net/uid-23769728-id-3080134.html ...

  8. SQL Server基线算法（同比和环比）

    基线介绍 基线为历史数据统计而成的数据,具有参考价值,并利用基线数据与当前值的对比,通过一定的报警机制,形成实时监控架构.SQL Server计数器采用同比和环比两种方式. 同比:可以计算未来一周的基 ...

  9. beaglebone black 安装QNX过程

    首先去http://community.qnx.com/sf/go/projects.bsp/frs.texas_instruments_am335_beaglebo 把下面4个下载下来.

  10. Windows 安装JRuby 生成 war 到 tomcat 运行

    Windows安装JRuby Rails 直接下载 JRuby,不装 Ruby. http://jruby.org/download 该安装包可以配好环境变量 %JRUBY_HOME% 等 安装 bu ...