前端鼠标点透问题




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。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值