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. POJ 2251 Dungeon Master（3D迷宫 bfs）

    传送门 Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 28416   Accepted: 11 ...

  2. Collection集合的功能及总结

    Collection集合是集合顶层接口,不能实例化 功能 1.添加功能 boolean add(Object obj):添加一个元素 boolean addAll(Collection c):添加一个 ...

  3. jq使用技巧

    1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器,  //只剩下那些与给定的选择器匹配的部分.在这种情况下,  //查询删除了任何没(:not)有(:has)  //包含class为 ...

  4. Web Map Gis 开发系列索引

    Google Map API Version3 :代码添加和删除marker标记 谷歌地图地理解析和反解析geocode.geocoder详解 Google map markers 百度与谷歌地图瓦片 ...

  5. 学习篇：TypeCodes的2015年博客升级记

    原文: https://typecodes.com/mix/2015updateblog.html 2015年博客升级记 作者:vfhky | 时间:2015-05-23 17:25 | 分类:mix ...

  6. Git 分支管理和冲突解决

    Git 分支管理和冲突解决 创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. 当前检出分支的前面会有星号. git branch newname 在当前检出分支上新建分支 ...

  7. 推荐几款我一直在用的chrome插件（下）

    请先看:推荐几款我一直在用的chrome插件(上) 6. Pocket 可以很方便的保存文章.视频等供以后查看,即实现了“Read it later”功能.有了 Pocket,您可以将所有想下次读的内 ...

  8. DNA解链统计物理

    来源:Kerson Huang, Lectures on Statistical Physics and Protein Folding, pp 24-25 把双链DNA解开就像拉拉链.设DNA有\( ...

  9. 07-本地 YUM 源制作

    1.YUM相关概念 1.1.什么是YUM YUM(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基 ...

  10. 一些js

    //fixed块随滚动条滚动 window.onscroll=function(){ var scroll_left = $(window).scrollLeft(); $('#table_fixed ...