前端鼠标点透问题

最新推荐文章于 2024-03-07 14:05:58 发布

关于安安

最新推荐文章于 2024-03-07 14:05:58 发布

阅读量335

点赞数

文章标签： click touch preventDefault

本文链接：https://blog.csdn.net/yangluan999/article/details/79980793

版权

  1. 触摸结束时 touchend 事件触发时，preventDefault()。看上去好像没有什么问题，但是，很遗憾的是不是所有的浏览器都支持。 

  　　2. 禁止页面缩放 通过设置meta标签，可以禁止页面缩放，部分浏览器不再需要等待 300ms，导致点击穿透。点击事件仍然会触发，但相对较快，所以 click 事件从某种意义上来说可以取代点击事件， 而代价是牺牲少数用户（click 事件触发仍然较慢）的体验。 

  <meta name="viewport" content="width=device-width, user-scalable=no"> 

  IE 10可以用 CSS 取消点击穿透的延迟： 

  html { 

  -ms-touch-action: manipulation; 

  touch-action: manipulation; 

}

  IE 11+ 可以用 touch-action: manipulation; 属性来阻止元素的双击缩放。 

  　　3. CSS3 的方法 虽然主要讲的是事件，但是有必要介绍一个 CSS3 的属性 —— pointer-events。 

  pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit; 

  pointer-events 属性有很多值，有用的主要是 auto 和 none，其他属性为 SVG 服务。 

  查看浏览器支持情况 可见移动端开发还是可以用的。 

  属性 含义 

  auto 默认值，鼠标或触屏事件不会穿透当前层 

  none 元素不再是target，监听的元素变成了下层的元素（如果子元素设置成 auto，点击子元素会继续监听事件） 

  　　4.延长消失事件 可以利用jquery的fadeout，设置事件大于300ms。 

关注