移动端事件（一）

最新推荐文章于 2024-04-07 08:07:50 发布

Mr_lwb

最新推荐文章于 2024-04-07 08:07:50 发布

阅读量1.5k

点赞数 1

分类专栏： Css3 Html5 Css3 Html5 文章标签： ontouchstart ontouchmove ontouchend

本文链接：https://blog.csdn.net/u010881899/article/details/56832739

版权

Css3 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

Html5

12 篇文章 0 订阅

订阅专栏

Css3 Html5

4 篇文章 0 订阅

订阅专栏

移动端的三大事件
手指按下：ontouchstart
手指移动：ontouchmove
手指抬起: ontouchend

提示：在移动端开发时，浏览器的模拟器时好时坏，一般不用on 来绑定事件的函数，采用事件绑定的方式

1、事件演示

Demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title></title>
<style type="text/css">
body{
    margin:0;
}
#test{
    width:200px;
    height:200px;
    background:red;
}
</style>

</head>
<body>

<div id="test"></div>

<script type="text/javascript">
    var oTest = document.getElementById('test');

    //on 绑定事件
    /*oTest.ontouchstart = function (){
        alert(1);
    }
    */
    //用addEventListener来绑定事件
    oTest.addEventListener('touchstart',function(){
        console.log('按下')
    })
    oTest.addEventListener('touchmove',function(){
        console.log('移动')
    })
    oTest.addEventListener('touchend',function(){
        console.log('抬起')
    })
</script>
</body>
</html>

2、事件（PC上问题）

//PC上的事件比移动端事件慢，时间大约300ms左右
oTest.addEventListener('mouseup',function(){
console.log('鼠标抬起')
})

oTest.addEventListener('touchstart',function(){
console.log('按下')
})

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

解决：
1.下层不要使用有点击（焦点）特性的元素。

2.阻止pc事件。

1.IOS10下设置meta禁止用户缩放是不可行的。（使用阻止pc事件就可以在IOS10下禁止用户缩放）

2.解决IOS10下溢出隐藏的问题。

3.禁止系统默认的滚动条、阻止橡皮筋效果

4.禁止长按选中文字、选中图片、系统默认菜单

5.解决点透问题

6.也阻止了焦点元素的焦点行为(要解决正常使用：采用ev.stopPropagation()阻止冒泡)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <title>test事件</title>
<style>
body,html{
    width:100%;
    overflow:hidden;
}
#div1{
    width:200px;
    height: 200px;
    background: red;
    position: absolute;
    top:0;
    left:0;
    opacity: .5;
}
#div2{
    width:3000px;
    height: 50px;
    background: yellow;
}   
</style>
</head>
<body>
<p id="p">点我呀!</p>
<a href="https://www.google.com.hk/" id="a">点我呀！！！</a>
<div id="div1"></div>
<div id="div2"></div>
<input type="text" name="text" id="txt" value="" />
<script type="text/javascript">
    /*
        移动端的点透：
            当上层元素发生点击的时候，下层元素也有点击（焦点）特性，
            在300ms之后，如果上层元素消失或者隐藏，目标点就会“漂移”到
            下层元素身上，就会触发点击行为。
            
        解决：
            1.下层不要使用有点击（焦点）特性的元素。
            
            2.阻止pc事件。
            
            1.IOS10下设置meta禁止用户缩放是不可行的。（使用阻止pc事件就可以在IOS10下禁止用户缩放）
            
            2.解决IOS10下溢出隐藏的问题。
            
            3.禁止系统默认的滚动条、阻止橡皮筋效果
            
            4.禁止长按选中文字、选中图片、系统默认菜单
            
            5.解决点透问题
            
            6.也阻止了焦点元素的焦点行为(要正常使用：ev.stopPropagation()阻止冒泡)
    */
    
   var oDiv1 = document.getElementById('div1');
   var oDiv2 = document.getElementById('div2'); 
   var oA = document.getElementById('a');
   var oTxt = document.getElementById('txt');
    
   //阻止PC默认事件
   document.addEventListener('touchstart',function(ev){
        ev.preventDefault();
   })

   oA.addEventListener('touchstart',function(){
        window.location.href="https://www.google.com.hk/";
   })

   oTxt.addEventListener('touchstart',function(ev){
        ev.stopPropagation();
   })

    oDiv1.addEventListener('touchend',endFn);

    function endFn(){
        this.style.display="none";
    }
    
</script>
</body>
</html>

Mr_lwb

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端事件（一）

移动端的三大事件手指按下：ontouchstart手指移动：ontouchmove手指抬起: ontouchend提示：在移动端开发时，浏览器的模拟器时好时坏，一般不用on 来绑定事件的函数，采用事件绑定的方式1、事件演示Demobody{ margin:0;}#test{ width:200px; height:2
复制链接

扫一扫