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. wireshark lua脚本

    1.目的:解析rssp2协议   2.如何使用wireshark lua插件 将编写的(假设为rssp2.lua)lua文本,放入wireshark 安装目录下,放哪里都行只要dofile添加了路径. ...

  2. ThinkPhp 3.2 CRUD操作

    创建数据对象 ThinkPHP可以帮助你快速地创建数据对象,最典型的应用就是自动根据表单数据创建数据对象,这个优势在一个数据表的字段非常之多的情况下尤其明显. 很简单的例子: // 实例化User模型 ...

  3. C语言变量类型和具体的范围

    什么是变量?变量自然和常量是相对的.常量就是 1.2.3.4.5.10.6......等固定的数字,而变量则根我们小学学的 x 是一个概念,我们可以让它是 1,也可以让它是 2,我们想让它是几是我们的 ...

  4. dict与list的in 操作的速度

    今天刷一道题,计算一串数字中其中两个数字相加等于目标值的题目,且取其中最早的两个数字(最后一个数字的位置靠前). 如[1,25,32,4,3,6,9,5]  targer:9  输出 [3,6]   ...

  5. Nodejs事件引擎libuv源码剖析之：高效队列（queue）的实现

     声明:本文为原创博文,转载请注明出处. 在libuv中,有一个只使用简单的宏封装成的高效队列(queue),现在我们就来看一下它是怎么实现的. 首先,看一下queue中最基本的几个宏: typede ...

  6. hibernate学习三（使用Annotation，注解）

    一.新建一个工程hibernate_02_HelloWorld_Annotation(复制01工程并重命名); 二.新建一个实体类teacher.java,数据库中新建teacher表; import ...

  7. js拖拽效果实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 我的vimrc

    set nocompatible set langmenu=en_USlet $LANG= 'en_US' source $VIMRUNTIME/vimrc_example.vim source $V ...

  9. Autoit3 获取WinForm下的ToolTip

    相比Autohotkey,在我看来,Autoit最实用的就是对于WinForm Application的良好支持 然而,要想将鼠标放在WinForm的ToolTip上,简直无异于自己把自己举起来,故而 ...

  10. Autoit3 正则表达式 匹配汉字

    关于Autoit3正则匹配汉字,在网上搜来搜去都是雷同的内容,[\u4e00-\u9fa5] 然而,Invalid all the time 直到认真钻研Help File,最终又看到了这个 http ...