移动端事件(1)

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

新老客户大回馈,云服务器低至5折

移动端的三大事件:

  手指按下:

    touchstart

  手指移动:

    touchmove

  手指抬起

    touchend

 

移动端点透问题的发生:

<meta name="viewport" content="width=device-width,user-scalable=no"/>
<style>
#div1{
  width:200px;
  height: 200px;
  background:red;
  position: absolute;
  top:0;
  left:0;
  opacity: .5;
}
</style>
<body>
  <a href="http://www.baidu.com">百度一下</a>
  <div id="div1"></div>
</body>
<script>
  var div1=document.getElementById("div1");
  div1.addEventListener("touchstart",function(){
  div1.style.display="none";
})
</script>

//当点击在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";

      })

    

<style>
#div1{
  width:200px;
  height: 200px;
  background:red;
}
</style>
<body>
  <div id="div1"></div>
</body>
<script>
  var div=document.getElementById("div1");
  // div.ontouchstart=function(){
  // alert(1);
  // }  on的方式绑定在浏览器模拟的时候常常会出现问题,通常不采用

  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这种方式绑定

</script>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:获取url查询参数的方法

下一篇:移动端事件(2)——事件对象