2023年6月21日发(作者：)
Bootstrap响应式Web开发（⼆）Bootstrap响应式Web开发（⼆）⽬录HTML5是HTML当前最新的版本，是新⼀代Web相关技术的总称。在HTML5中提供了很多新的特性，如⽂件读取、⽹络存储等。另外，⽬前多数移动端设备都使⽤触屏操作，使得⽤户逐渐摆脱了键盘和⿏标操作的束缚，⼈机交互更加⽅便⼀、HTML5 常⽤API1、监测⽹络连接在HTML5之前，我们可以通过来检查⽤户当前的⽹络状态，它会返回⼀个布尔值，false表⽰没有连接⽹络，true表⽰已连接⽹络。HTML5提供了online和offline两个事件，它们监听的都是window对象。其中，online在⽤户⽹络连接时调⽤，offline在⽤户⽹络断开时调⽤。需要注意的是，这种⽅式在不同浏览器会存在差异⽰例：检测⽹络连接状态
2、全屏操作HTML5提供了requestFullScreen()⽅法允许⽤户⾃定义⽹页上任⼀元素的全屏显⽰，并提供了cancelFullScreen()⽅法关闭全屏显⽰。这两个⽅法存在兼容性问题，IE 9+才会⽀持，即使⾼版本浏览器也有兼容性问题。因此不同浏览器需要添加不同的私有前缀各类浏览器的全屏⽅法①Chrome浏览器基于WebKit内核的浏览器需要添加webkit前缀，使⽤webkitRequestFullScreen()和webkitCancelFullScreen()来实现②Opera浏览器Opera浏览器需要添加o前缀，使⽤oRequestFullScreen()和oCancelFullScreen()来实现③⽕狐浏览器基于Gecko内核的浏览器需要添加moz前缀，使⽤mozRequestFullScreen()和mozCancelFullScreen()来实现④IE浏览器基于Trident内核的浏览器需要添加ms前缀，使⽤msRequestFullscreen()和msCancelFullscreen()来实现，注意⽅法⾥的screen的s为⼩写形式⽰例：全屏操作取消全屏elector('#cancelFull').onclick = function() { if(FullScreen) { FullScreen(); //
正常浏览器 } else if (CancelFullScreen) { CancelFullScreen(); // webkit } else if (…) { … }
else { alert('暂不⽀持在您的浏览器中全屏'); }};3、⽂件读取如果想要把图⽚的缩略图显⽰到页⾯中，这就需要⽤到HTML5给我们提供的⽂件读取接⼝来实现。该接⼝通过FileReader对象来读取本地存储的⽂件，然后使⽤File对象来指定读取的⽂件或数据。File对象可以是来⾃⽤户在⼀个元素上（如）选择⽂件后返回的FileList对象，也可以是⾃由拖放操作⽣成的DataTransfer对象。dataTransfer对象只能访问⽂件的⼀些基本的信息由于Web环境的特殊性，为了考虑⽂件安全问题，浏览器不允许JavaSctipt直接访问⽂件系统，使⽤表单元素的⽂件域来实现⽂件的上传。input元素还有⼀个multiple属性（HTML 5新增），可以实现⼀次上传多个⽂件。在⽤户选择⽂件以后，可以得到⼀个FileList对象，它代表所选的⽂件列表4、地理定位地理定位在⽇常⽣活中应⽤⽐较⼴泛，例如，互联⽹打车、在线地图等。在HTML 5的规范中，增加了获取⽤户地理位置信息的接⼝Geolocation，开发者可以通过经纬度来获取⽤户的地理位置信息，Geolocation接⼝的特点如下Geolocation接⼝封装了获取位置信息的技术细节开发者不需要关⼼信息的来源，只需关注如何使⽤即可，这极⼤地简化了开发的难度⽬前，该接⼝已经得到了⼤部分浏览器的⽀持，如Firefox、IE 9、Opera、Safari和Chrome等对于拥有GPS的设备，定位会更加准确，如iPhone和Android⼿机等ation对象提供了getCurrentPosition()⽅法来获取当前地理位置。其中，navigator是浏览器的内置对象。当getCurrentPosition()⽅法被调⽤时，会发起⼀个异步请求，浏览器会去调⽤底层的硬件来更新当前的位置信息当getCurrentPosition(successCallback, errorCallback)⽅法成功获取地理信息后，会在successCallback回调函数中传⼊position对象，position对象属性如表所⽰position对象中的coords属性包含的信息如表所⽰5、拖曳拖曳操作需要借助于⿏标来实现，如⽂件或图⽚的移动操作等。在开发中，我们经常使⽤原⽣的JavaScript来实现拖曳效果，实现起来⽐较复杂。因此，HTML5为我们提供了更好⽤的接⼝或者事件，在很⼤程度上简化了页⾯中拖曳交互的实现难度图⽚和链接默认是可以拖动的，它们不⽤添加draggable属性。⼀个完整的拖曳效果由拖曳（Drag）和释放（Drop）组成的。在拖曳操作中，被拖动的元素称之为源对象，它指的是页⾯中设置了draggable="true"属性的元素；源对象进⼊的元素称之为⽬标元素，⽬标元素可以是页⾯中的任⼀元素。在HTML5中提供了拖曳元素的事件，如表所⽰在HTML5中提供了⽬标元素相关的事件，如表所⽰注：只有当源对象上的⿏标点进⼊⽬标元素时，才会触发ondragenter事件。默认情况下，浏览器会默认阻⽌ondrop事件，如果想要触发该事件。则需要在ondragover事件中使⽤“return false;”（或者tDefault()）来阻⽌其默认⾏为6、Web存储随着互联⽹的快速发展，基于⽹页的应⽤越来越普遍，同时也变得越来越复杂。为了满⾜各种各样的需求，会经常在本地设备上存储⼤量的数据。例如，记录历史活动信息。传统的⽅式是使⽤来进⾏存储，但是由于其存储空间有限（⼤约4KB），并且需要复杂的操作来解析，给开发者带来了诸多不便。为此，HTML 5规范提出了⽹络存储的相关解决的⽅案，即Web Storage（Web存储）和本地数据库Web SQL DatabaseWeb Storage API中包含两个关键的对象，分别是window. sessionStorage对象和window. localStorage对象。前者⽤于区域存储，后者⽤于本地存储。Web Storage具有以下特点数据的设置和读取⽐较⽅便容量较⼤，sessionStorage⼤约为5MB，localStorage⼤约为20MB只能存储字符串，若想要存储JSON对象，则可以使⽤ify() 或者parse()进⾏序列化和反序列化编码Web Storage除了在移动平台上具有良好的兼容性外，它还具有以下优势减少⽹络流量的使⽤使⽤WebStorage，⼀旦数据保存在本地后，就可以避免再次向服务器请求数据。因此减少了不必要的数据请求，同时也减少了数据在浏览器和服务器间不必要地来回传递能够快速显⽰数据使⽤Web Storage性能好，因为从本地读数据⽐通过⽹络从服务器获得数据速度要快很多，可以即时获得本地数据。再加上⽹页本⾝也可以有缓存，因此如果整个页⾯和数据都在本地，则可以⽴即显⽰可以临时存储数据由于sessionStroage对象和localStorage对象都是Storage的实例，所以都可以使⽤Storage接⼝提供的⽅法和属性。Web Storage接⼝中提供了⼀些⽅法和属性，如表所⽰sessionStorage主要⽤于区域存储，区域存储是指数据只在单个页⾯的会话期内有效。session就是会话的意思，⽐如现实⽣活中，打电话时从拿起话筒拨号到挂断电话之间的⼀系列过程可以称为⼀次会话。在Web开发中，⼀次会话是指⼀个浏览器窗⼝从打开到关闭的过程。如果关闭浏览器，那么会话就将结束。sessionStorage的数据是保存在浏览器的内存中的。当浏览器关闭后，内存将被⾃动清除注：localStorage与sessionStorage唯⼀的区别就是存储数据的⽣命周期不同。locaStorage 是永久性存储，⽽sessionStorage的⽣命周期与会话保持⼀致，会话结束时数据消失。从硬件⽅⾯理解，localStorage的数据是存储在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取。⽽sessionStorage的数据保存在浏览器的内存中，当浏览器关闭后，内存将被⾃动清除。localStorage在使⽤中也有⼀些局限，具体如下IE浏览器在IE 8以上版本才⽀持localStorage这个属性不同浏览器可以保存的数据量⼤⼩不统⼀⽬前所有的浏览器中都会把localStorage的值类型限定为String类型，对于⽇常⽐较常见的JSON对象类型需要做⼀些转换localStorage在浏览器的隐私模式下是不可读取的localStorage本质上是对字符串的读取。如果存储的内容过多会消耗内存空间，导致页⾯下载速度变慢localStorage不能被⽹络爬⾍抓取到7、 播放视频和⾳频标签⽤来定义视频播放器，它不仅是⼀个播放视频的标签，其控制栏还实现了包括播放、暂停、进度和⾳量控制、全屏等功能，更重要的是⽤户可以⾃定义这些功能和控制栏的样式src和controls是标签的两个基本属性，此外还包括width和height属性src属性⽤于设置视频⽂件的路径width属性表⽰设置视频窗⼝的宽度height属性表⽰设置视频窗⼝的⾼度controls属性⽤于为视频提供播放控件标签⽀持以下3种视频格式Ogg：带有Theora视频编码和Vorbis⾳频编码的Ogg⽂件MPEG 4：带有H.264视频编码和AAC⾳频编码的MPEG 4⽂件WebM：带有VP8视频编码和Vorbis⾳频编码的WebM⽂件注：HTML 5 DOM为和元素提供了类似的⽅法、属性和事件，它们都需要使⽤JavaScript来操作和元素。如果使⽤的是jQuery库，则需要进⾏相应的转换不同浏览器对视频⽂件类型的⽀持情况HTML 5中提供了标签，⽤于指定多个备⽤的不同格式的⽂件路径，基本语法如下⼆、移动端常⽤事件1、Touch事件：是移动端常⽤事件中最为典型的事件，其含义为“触摸”。Touch 事件是⼀组事件，也是多数触屏操作事件的总称。⼤部分主流的移动端浏览器⽀持的4种最基本的Touch触屏事件，如表所⽰在PC端中，当⼀个事件发⽣后，与事件相关的⼀系列信息数据的集合都会放到这个对象⾥⾯，这个对象称为event事件对象。和PC端⼀样，移动端也有⾃⼰的事件对象，Touch触摸事件发⽣后也会产⽣TouchEvent对象，该对象包含了3个⽤于跟踪触摸的属性，⽤于返回不同的触摸点集合，如表所⽰注：touches和targetTouches只存储接触屏幕的触点，⽽想要获取触点最后离开的状态要使⽤changedTouches。另外，touches和targetTouches在Chrome浏览器测试和真机测试中是没有区别的，推荐使⽤targetTouches触摸点集合中每个Touch对象代表⼀个触点，它包含⼀些⽤于获取触摸信息的常⽤属性，如位置，⼤⼩，形状，压⼒⼤⼩和⽬标element属性等，如表所⽰⽰例： Touch事件实现轮播图效果2、模拟移动端单击事件随着移动端⽹页的流⾏与普及，⽤户对⽹页性能有了更⾼的要求，⽽在移动端使⽤click会出现延迟，这会影响⽤户的体验。基于原⽣的touch事件本⾝是没有tap单击事件的，根据移动端操作优先的原则，为了提⾼移动端单击事件的响应速度，⼀般使⽤Touch事件来模拟移动端tap单击事件。该单击事件必须满⾜以下要求单击事件只有⼀个⼿指去触发屏幕触发屏幕的时间差异必须⼩于某⼀个值，并且不能有长距离的活动确保没有滑动操作，如果有抖动必须保证抖动的距离在指定范围内三、移动端常⽤插件1、 Fastclick插件的使⽤Fastclick插件是由 FT Labs 开发的JavaScript库，它简单易⽤，上⼿⽐较快，解决了click事件在移动端触发时有⼤约300ms延时的问题。另外，Fastclick在PC端也能响应解决延时问题，这⼤⼤提⾼了⽤户浏览体验的效果，使得操作反应更加灵敏。通过官⽹下载⾄本地，然后在HTML⽹页中使⽤()⽅法的参数可以是任意的DOM元素，在这⾥使⽤表⽰会将下⾯的所有元素都绑定为Fastclick。通过JavaScript⽅式对Fastclick进⾏实例化if ('addEventListener' in document) { ntListener('DOMContentLoaded', function() { (); }, false);}通过jQuery⽅式对Fastclick进⾏实例化，具体代码如下$(function() {();});2、 利⽤Fastclick处理点透事件点透事件即点击穿透事件，其发⽣的原因是，当⽤户在点击屏幕的时候，系统会触发touch事件和click事件。因为touch事件是移动端事件，所以会优先处理⽴刻去响应，touch事件经过⼀系列流程处理完成后，才会去触发click事件3、iScroll插件的使⽤通过⽹站下载⾄本地，当下载完成后，会在本地创建⼀个iscroll-master⽂件，打开该⽂件找到bulid⽬录，在⽬录中提供了不同版本的iScroll库。然后在HTML⽹页中使⽤定义div元素为⽗容器，我们需要给⽗容器设置固定的宽度和⾼度，并且⼦元素ul的⾼度或者宽度必须⼤于⽗元素，这样才能进⾏垂直滚动或者⽔平滚动。注意只有容器元素的第⼀个⼦元素能进⾏滚动，其他⼦元素完全被忽略，具体代码如下
- ...
- ... ...
2023年6月21日发(作者：)
Bootstrap响应式Web开发（⼆）Bootstrap响应式Web开发（⼆）⽬录HTML5是HTML当前最新的版本，是新⼀代Web相关技术的总称。在HTML5中提供了很多新的特性，如⽂件读取、⽹络存储等。另外，⽬前多数移动端设备都使⽤触屏操作，使得⽤户逐渐摆脱了键盘和⿏标操作的束缚，⼈机交互更加⽅便⼀、HTML5 常⽤API1、监测⽹络连接在HTML5之前，我们可以通过来检查⽤户当前的⽹络状态，它会返回⼀个布尔值，false表⽰没有连接⽹络，true表⽰已连接⽹络。HTML5提供了online和offline两个事件，它们监听的都是window对象。其中，online在⽤户⽹络连接时调⽤，offline在⽤户⽹络断开时调⽤。需要注意的是，这种⽅式在不同浏览器会存在差异⽰例：检测⽹络连接状态
2、全屏操作HTML5提供了requestFullScreen()⽅法允许⽤户⾃定义⽹页上任⼀元素的全屏显⽰，并提供了cancelFullScreen()⽅法关闭全屏显⽰。这两个⽅法存在兼容性问题，IE 9+才会⽀持，即使⾼版本浏览器也有兼容性问题。因此不同浏览器需要添加不同的私有前缀各类浏览器的全屏⽅法①Chrome浏览器基于WebKit内核的浏览器需要添加webkit前缀，使⽤webkitRequestFullScreen()和webkitCancelFullScreen()来实现②Opera浏览器Opera浏览器需要添加o前缀，使⽤oRequestFullScreen()和oCancelFullScreen()来实现③⽕狐浏览器基于Gecko内核的浏览器需要添加moz前缀，使⽤mozRequestFullScreen()和mozCancelFullScreen()来实现④IE浏览器基于Trident内核的浏览器需要添加ms前缀，使⽤msRequestFullscreen()和msCancelFullscreen()来实现，注意⽅法⾥的screen的s为⼩写形式⽰例：全屏操作取消全屏elector('#cancelFull').onclick = function() { if(FullScreen) { FullScreen(); //
正常浏览器 } else if (CancelFullScreen) { CancelFullScreen(); // webkit } else if (…) { … }
else { alert('暂不⽀持在您的浏览器中全屏'); }};3、⽂件读取如果想要把图⽚的缩略图显⽰到页⾯中，这就需要⽤到HTML5给我们提供的⽂件读取接⼝来实现。该接⼝通过FileReader对象来读取本地存储的⽂件，然后使⽤File对象来指定读取的⽂件或数据。File对象可以是来⾃⽤户在⼀个元素上（如）选择⽂件后返回的FileList对象，也可以是⾃由拖放操作⽣成的DataTransfer对象。dataTransfer对象只能访问⽂件的⼀些基本的信息由于Web环境的特殊性，为了考虑⽂件安全问题，浏览器不允许JavaSctipt直接访问⽂件系统，使⽤表单元素的⽂件域来实现⽂件的上传。input元素还有⼀个multiple属性（HTML 5新增），可以实现⼀次上传多个⽂件。在⽤户选择⽂件以后，可以得到⼀个FileList对象，它代表所选的⽂件列表4、地理定位地理定位在⽇常⽣活中应⽤⽐较⼴泛，例如，互联⽹打车、在线地图等。在HTML 5的规范中，增加了获取⽤户地理位置信息的接⼝Geolocation，开发者可以通过经纬度来获取⽤户的地理位置信息，Geolocation接⼝的特点如下Geolocation接⼝封装了获取位置信息的技术细节开发者不需要关⼼信息的来源，只需关注如何使⽤即可，这极⼤地简化了开发的难度⽬前，该接⼝已经得到了⼤部分浏览器的⽀持，如Firefox、IE 9、Opera、Safari和Chrome等对于拥有GPS的设备，定位会更加准确，如iPhone和Android⼿机等ation对象提供了getCurrentPosition()⽅法来获取当前地理位置。其中，navigator是浏览器的内置对象。当getCurrentPosition()⽅法被调⽤时，会发起⼀个异步请求，浏览器会去调⽤底层的硬件来更新当前的位置信息当getCurrentPosition(successCallback, errorCallback)⽅法成功获取地理信息后，会在successCallback回调函数中传⼊position对象，position对象属性如表所⽰position对象中的coords属性包含的信息如表所⽰5、拖曳拖曳操作需要借助于⿏标来实现，如⽂件或图⽚的移动操作等。在开发中，我们经常使⽤原⽣的JavaScript来实现拖曳效果，实现起来⽐较复杂。因此，HTML5为我们提供了更好⽤的接⼝或者事件，在很⼤程度上简化了页⾯中拖曳交互的实现难度图⽚和链接默认是可以拖动的，它们不⽤添加draggable属性。⼀个完整的拖曳效果由拖曳（Drag）和释放（Drop）组成的。在拖曳操作中，被拖动的元素称之为源对象，它指的是页⾯中设置了draggable="true"属性的元素；源对象进⼊的元素称之为⽬标元素，⽬标元素可以是页⾯中的任⼀元素。在HTML5中提供了拖曳元素的事件，如表所⽰在HTML5中提供了⽬标元素相关的事件，如表所⽰注：只有当源对象上的⿏标点进⼊⽬标元素时，才会触发ondragenter事件。默认情况下，浏览器会默认阻⽌ondrop事件，如果想要触发该事件。则需要在ondragover事件中使⽤“return false;”（或者tDefault()）来阻⽌其默认⾏为6、Web存储随着互联⽹的快速发展，基于⽹页的应⽤越来越普遍，同时也变得越来越复杂。为了满⾜各种各样的需求，会经常在本地设备上存储⼤量的数据。例如，记录历史活动信息。传统的⽅式是使⽤来进⾏存储，但是由于其存储空间有限（⼤约4KB），并且需要复杂的操作来解析，给开发者带来了诸多不便。为此，HTML 5规范提出了⽹络存储的相关解决的⽅案，即Web Storage（Web存储）和本地数据库Web SQL DatabaseWeb Storage API中包含两个关键的对象，分别是window. sessionStorage对象和window. localStorage对象。前者⽤于区域存储，后者⽤于本地存储。Web Storage具有以下特点数据的设置和读取⽐较⽅便容量较⼤，sessionStorage⼤约为5MB，localStorage⼤约为20MB只能存储字符串，若想要存储JSON对象，则可以使⽤ify() 或者parse()进⾏序列化和反序列化编码Web Storage除了在移动平台上具有良好的兼容性外，它还具有以下优势减少⽹络流量的使⽤使⽤WebStorage，⼀旦数据保存在本地后，就可以避免再次向服务器请求数据。因此减少了不必要的数据请求，同时也减少了数据在浏览器和服务器间不必要地来回传递能够快速显⽰数据使⽤Web Storage性能好，因为从本地读数据⽐通过⽹络从服务器获得数据速度要快很多，可以即时获得本地数据。再加上⽹页本⾝也可以有缓存，因此如果整个页⾯和数据都在本地，则可以⽴即显⽰可以临时存储数据由于sessionStroage对象和localStorage对象都是Storage的实例，所以都可以使⽤Storage接⼝提供的⽅法和属性。Web Storage接⼝中提供了⼀些⽅法和属性，如表所⽰sessionStorage主要⽤于区域存储，区域存储是指数据只在单个页⾯的会话期内有效。session就是会话的意思，⽐如现实⽣活中，打电话时从拿起话筒拨号到挂断电话之间的⼀系列过程可以称为⼀次会话。在Web开发中，⼀次会话是指⼀个浏览器窗⼝从打开到关闭的过程。如果关闭浏览器，那么会话就将结束。sessionStorage的数据是保存在浏览器的内存中的。当浏览器关闭后，内存将被⾃动清除注：localStorage与sessionStorage唯⼀的区别就是存储数据的⽣命周期不同。locaStorage 是永久性存储，⽽sessionStorage的⽣命周期与会话保持⼀致，会话结束时数据消失。从硬件⽅⾯理解，localStorage的数据是存储在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取。⽽sessionStorage的数据保存在浏览器的内存中，当浏览器关闭后，内存将被⾃动清除。localStorage在使⽤中也有⼀些局限，具体如下IE浏览器在IE 8以上版本才⽀持localStorage这个属性不同浏览器可以保存的数据量⼤⼩不统⼀⽬前所有的浏览器中都会把localStorage的值类型限定为String类型，对于⽇常⽐较常见的JSON对象类型需要做⼀些转换localStorage在浏览器的隐私模式下是不可读取的localStorage本质上是对字符串的读取。如果存储的内容过多会消耗内存空间，导致页⾯下载速度变慢localStorage不能被⽹络爬⾍抓取到7、 播放视频和⾳频标签⽤来定义视频播放器，它不仅是⼀个播放视频的标签，其控制栏还实现了包括播放、暂停、进度和⾳量控制、全屏等功能，更重要的是⽤户可以⾃定义这些功能和控制栏的样式src和controls是标签的两个基本属性，此外还包括width和height属性src属性⽤于设置视频⽂件的路径width属性表⽰设置视频窗⼝的宽度height属性表⽰设置视频窗⼝的⾼度controls属性⽤于为视频提供播放控件标签⽀持以下3种视频格式Ogg：带有Theora视频编码和Vorbis⾳频编码的Ogg⽂件MPEG 4：带有H.264视频编码和AAC⾳频编码的MPEG 4⽂件WebM：带有VP8视频编码和Vorbis⾳频编码的WebM⽂件注：HTML 5 DOM为和元素提供了类似的⽅法、属性和事件，它们都需要使⽤JavaScript来操作和元素。如果使⽤的是jQuery库，则需要进⾏相应的转换不同浏览器对视频⽂件类型的⽀持情况HTML 5中提供了标签，⽤于指定多个备⽤的不同格式的⽂件路径，基本语法如下⼆、移动端常⽤事件1、Touch事件：是移动端常⽤事件中最为典型的事件，其含义为“触摸”。Touch 事件是⼀组事件，也是多数触屏操作事件的总称。⼤部分主流的移动端浏览器⽀持的4种最基本的Touch触屏事件，如表所⽰在PC端中，当⼀个事件发⽣后，与事件相关的⼀系列信息数据的集合都会放到这个对象⾥⾯，这个对象称为event事件对象。和PC端⼀样，移动端也有⾃⼰的事件对象，Touch触摸事件发⽣后也会产⽣TouchEvent对象，该对象包含了3个⽤于跟踪触摸的属性，⽤于返回不同的触摸点集合，如表所⽰注：touches和targetTouches只存储接触屏幕的触点，⽽想要获取触点最后离开的状态要使⽤changedTouches。另外，touches和targetTouches在Chrome浏览器测试和真机测试中是没有区别的，推荐使⽤targetTouches触摸点集合中每个Touch对象代表⼀个触点，它包含⼀些⽤于获取触摸信息的常⽤属性，如位置，⼤⼩，形状，压⼒⼤⼩和⽬标element属性等，如表所⽰⽰例： Touch事件实现轮播图效果2、模拟移动端单击事件随着移动端⽹页的流⾏与普及，⽤户对⽹页性能有了更⾼的要求，⽽在移动端使⽤click会出现延迟，这会影响⽤户的体验。基于原⽣的touch事件本⾝是没有tap单击事件的，根据移动端操作优先的原则，为了提⾼移动端单击事件的响应速度，⼀般使⽤Touch事件来模拟移动端tap单击事件。该单击事件必须满⾜以下要求单击事件只有⼀个⼿指去触发屏幕触发屏幕的时间差异必须⼩于某⼀个值，并且不能有长距离的活动确保没有滑动操作，如果有抖动必须保证抖动的距离在指定范围内三、移动端常⽤插件1、 Fastclick插件的使⽤Fastclick插件是由 FT Labs 开发的JavaScript库，它简单易⽤，上⼿⽐较快，解决了click事件在移动端触发时有⼤约300ms延时的问题。另外，Fastclick在PC端也能响应解决延时问题，这⼤⼤提⾼了⽤户浏览体验的效果，使得操作反应更加灵敏。通过官⽹下载⾄本地，然后在HTML⽹页中使⽤()⽅法的参数可以是任意的DOM元素，在这⾥使⽤表⽰会将下⾯的所有元素都绑定为Fastclick。通过JavaScript⽅式对Fastclick进⾏实例化if ('addEventListener' in document) { ntListener('DOMContentLoaded', function() { (); }, false);}通过jQuery⽅式对Fastclick进⾏实例化，具体代码如下$(function() {();});2、 利⽤Fastclick处理点透事件点透事件即点击穿透事件，其发⽣的原因是，当⽤户在点击屏幕的时候，系统会触发touch事件和click事件。因为touch事件是移动端事件，所以会优先处理⽴刻去响应，touch事件经过⼀系列流程处理完成后，才会去触发click事件3、iScroll插件的使⽤通过⽹站下载⾄本地，当下载完成后，会在本地创建⼀个iscroll-master⽂件，打开该⽂件找到bulid⽬录，在⽬录中提供了不同版本的iScroll库。然后在HTML⽹页中使⽤定义div元素为⽗容器，我们需要给⽗容器设置固定的宽度和⾼度，并且⼦元素ul的⾼度或者宽度必须⼤于⽗元素，这样才能进⾏垂直滚动或者⽔平滚动。注意只有容器元素的第⼀个⼦元素能进⾏滚动，其他⼦元素完全被忽略，具体代码如下
- ...
- ... ...
发布评论