click和tap以及事件穿透

click在移动端有太多复杂的功能是监听不到的,例如,触摸、按住和轻滑,且click事件时间上会有延迟,大概200-300ms,这时候就要用tap方法了。

但是tap还有一个特点就是事件穿透,就是你执行完绑定的tap事件之后呢,如果下面如果绑定了其他事件或者是本身就存在点击事件的话,也会默认触发。

解决办法

1. 第一种  通过执行e.preventDefault()阻止touchend事件的默认行为,

  // 第一种  通过阻止touchend事件的默认行为,
  // e.preventDefault()
 
top1.ontouchend = function (e) {      
      e.preventDefault()
        console.log("我准备关闭上层的按钮了");
        top1.style.display = "none";
      };
      btm.onclick = function () {
        console.log("我被点击了");
      };

2. 第二种 延迟300ms再关闭

 setTimeout(()=>{
          top1.style.display ="none";
     },350)

3. 第三种:使用插件 fastclick.js 防止手势穿透, 这个插件专为解决手势穿透现象而生

  
 
 
  FastClick.attach(document.body);

你可能感兴趣的:(javascript,开发语言,ecmascript)