首页 > > 网页制作 > Javascript >

移动端事件（1）

2018-10-06 08:06:20来源：博客园阅读 ()

移动端的三大事件：

　　手指按下:

　　　　touchstart

　　手指移动:

　　　　touchmove

　　手指抬起

　　　　touchend

移动端点透问题的发生：

//当点击在div1身上的时候div1会消失，可以当点击a的时候，div1消失之后，300ms之后，又会发生跳转的现象。这就是点透。

注意：

　　在移动端开发的时候，浏览器的模拟器时好时坏，一般不用on的方式绑定函数，要用事件绑定的方式（add.EventListener）

　　不建议用电脑端事件的原因（如：mousedown)如下：

　　pc上的事件比移动端的事件略慢,大概是在300ms左右。

　　移动端的点透

　　含义：当上层元素发生点击的时候，下层元素也有点击（焦点）特性，在300ms之后，如果上层元素消失或隐藏，目标点就会“漂移”到下层元素身上，就会触发点击行为。

　　解决：

　　　（1）下层不要使用有点击（焦点）特性的元素——不利于seo搜索

　　　（2）阻止pc的事件

　　　　　　即：document.addEventListener("touchstart",function(){

　　　　　　　　ev.preventDefault();

　　　　　　})

　　　　　　这句话的好处：

　　　　　　IOS10下设置meta禁止用户缩放是不可行的。（使用阻止pc事件就可以在IOS10下禁止用户缩放。解决IOS10下溢出隐藏的问题。禁止系统默认的滚动条、阻止橡皮筋效果。可以禁止长按选中文字，选中图片、系统的菜单。解决点透问题。也阻止了焦点元素的焦点行为(要正常使用，需要使用ev.stopPropagation阻止冒泡)。

　　　　　 如何解决元素焦点行为被阻止？

　　　　　　txt.addEventListener("touchstart",function(ev){

　　　　　　　　ev.stopPropagation();

　　　　　　})　

　　　　　　若是想要跳转则使用：

　　　　　　a.addEventListener("touchstart",function(){

　　　　　　　　window.loaction.href="http://www.baidu.com";

　　　　　　})

　　div.addEventListener("touchstart",start);
　　div.addEventListener("touchmove",move);
　　div.addEventListener("touchend",end);
　　function start(){
　　　　console.log("手指按下");
　　}
　　function move(){
　　　　console.log("移动");
　　}
　　function end(){
　　　　console.log("手指抬起");
　　}要用addEventListener这种方式绑定