前端鼠标点透问题

原创 2018年04月17日 21:04:30



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。

移动端h5页面点透问题

一个页面分三个tab, 通过隐藏,显示div来展示不同的数据。 A tab页面:已开通基金列表数据, 当没有数据时,会显示一个跳转到B tab页面的a标签 B tab页面: 未开通的基金列表数据,可以...
  • changerzhuo_319
  • changerzhuo_319
  • 2017-09-02 19:02:17
  • 299

js之看你的鼠标点多快

$(document).ready(function(){ var last, diff; $('div').click(function(event) { if ( last ) { d...
  • cangkukuaimanle
  • cangkukuaimanle
  • 2012-11-17 14:30:46
  • 2280

移动端点透现象即解决办法

点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件。在这种情况下,点击A/B重叠的部分,...
  • weixin_37595918
  • weixin_37595918
  • 2017-07-20 16:22:42
  • 1206

鼠标点不到 的对话框

  • 2010年07月01日 14:27
  • 19KB
  • 下载

取指定点颜色,获取鼠标的位置,抓取颜色

  • 2013年08月14日 09:48
  • 43KB
  • 下载

鼠标点击按钮拖动窗体

public partial class Form1 : Form { //记录窗体的X坐标 private int startX; //记录窗体的Y坐标 private int startY; ...
  • lin_lujian
  • lin_lujian
  • 2011-11-07 22:49:59
  • 359

实时捕捉鼠标x点y点

从上午开始我从网上down了几个拖动的层的例子,大概看了看实现方法要用到event    偶的思路是当鼠标点向层的时候,也就是开始拖的时候,时实判断鼠标移动位置来更改层的位置,不知道这个方法行不行得通...
  • TaoTaoYou
  • TaoTaoYou
  • 2008-04-23 16:47:00
  • 646

MFC下打开图片并显示鼠标点位置灰度值

  • 2011年11月09日 17:21
  • 2.67MB
  • 下载

word中鼠标没有反应,可以动但是点哪都没反应

以前从没有出现过这个问题,但是我昨天在电脑里装了一个公式编辑器以后,晚上在用word打字时,刚打没几行,就不好用了,鼠标箭头可以word中随便移动,但是在word中点什么都没有反应,右键点下面的小窗口...
  • zhlyyea
  • zhlyyea
  • 2010-07-07 16:54:00
  • 3984

javascript鼠标点入input内value值隐藏事件

鼠标事件                                         //jQuery方法         $(document).ready(function...
  • carrie_tc
  • carrie_tc
  • 2012-03-15 15:28:41
  • 356
收藏助手
不良信息举报
您举报文章:前端鼠标点透问题
举报原因:
原因补充:

(最多只允许输入30个字)