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. MYSQL远程登录权限设置 ，可以让Navicat远程连接服务器的数据库

    Mysql默认关闭远程登录权限,如下操作允许用户在任意地点登录: 1. 进入mysql,GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY ...

  2. 微信学习总结 02 ngrok 部署本机代码，使外网可以访问

    一 什么是ngrok ngrok is a reverse proxy that creates a secure tunnel from a public endpoint to a locally ...

  3. es6学习笔记（1） let和const命令详解

    let和const命令: Es6新增了let命令,声明变量,但与var不一样的,只在let命令所在的代码块内有效(如for循环之外let声明的变量就不再有效).并且let不像var那样会发生" ...

  4. highcharts总结

    //tooptip此属性表达的是鼠标移那个位置显示的值 tooptip:{ formatter: function (){ //this.point.name 表达显示名字 //this.x 表达显示 ...

  5. SQL Server 2016正式版安装（超多图）

    微软数据库SQL Server 2016正式版在2016年6月就发布,由于近期工作忙,一直拖到现在才有时间把安装过程写到博客上,分享给大家.本人一直习惯使用英文版,所以版本和截图都是英文版的.废话少说 ...

  6. 【IOS】将字体大小不同的文字底部对齐

    从WP转IOS了,还是放不下...... 在项目中,要实现如图多个不同大小的文字   底部对齐的效果   像下面这样: (想要的效果) 以为用三个UIFont不同的UILabel  之后让他们底部对齐 ...

  7. Netty入门学习

    一.他山之石 Netty实现原理浅析 http://www.importnew.com/15656.html netty线程模型 http://www.infoq.com/cn/articles/ne ...

  8. Maven的环境搭建及新建web项目

    第一次接触maven,做一个简单的记录 一.下载maven及环境变量的配置 下载地址 http://maven.apache.org/download.cgi 配置其环境变量  MAVEN_HOME= ...

  9. WPF这样的界面应该如何编写呢？

    如上图: 外围是一个Border,内部填充一个Grid,Grid分成两行,第一行有一个按钮可以进行操作(主要是操作ListBox的数据源:增加和删除对象),第二行填充一个ListBox,绑定数据源并根 ...

  10. .NET中的异步

    .NET中4种异步方式? ThreadPool.QueueUserworkItem实现 APM模式(就是BeginXXX和EndXXX成对出现.) EAP模式(就是Event based, 准确说来就 ...