在做移动端的页面时，经常会遇到点击（touch）一个弹出的层，在上面触发点击（touch）事件，当弹出层关闭之后点击（touch）事件会穿透到下面的层，这时候如果下一层的某个元素也绑定了点击（touch）事件，就会也一起被触发，如何解决这所谓的bug？解决这一问题需要用到css3的新属性，pointer-events，下面先看一下他的属性设置值，可以在下面层绑定点击（touch）事件添加这一css3属性，在弹出层消失的时候设置一个setTimeout延迟时间（500ms），之后再把这一属性值移除

pointer-events：none;

pointer-events：auto;

pointer-events的更多相关文章

  1. 浏览器 Pointer Events

    前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...

  2. javascript code snippet -- Forwarding Mouse Events Through Layers

    Anyone who has worked with web apps has likely created a masking element at some point, and the grea ...

  3. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

  4. touch pointer

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  5. 浏览器的统一指针事件：Pointer Event

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  6. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  7. javascript 手势缩放 旋转 拖动支持：hammer.js

    原文: https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html /*! Hammer.JS - v2.0.4 ...

  8. Xenko基础API笔记3- Pointers指针设备屏幕上点对应的手指触摸。

    样本这里是一个简单的示例程序,跟踪目前在屏幕上的指针和打印他们的位置.访问输入字段,类继承自@ SiliconStudio.Xenko.脚本的类. public override async Task ...

  9. 【转】谈谈Google Polymer以及Web UI框架的未来

    原文转自:http://www.csdn.net/article/2013-05-27/2815450-google-polymer 摘要:开发者Axel Rauschmayer在自己的博客上详解了G ...

  10. 单击HighCharts柱形体弹框显示详细信息

    上篇博客介绍了如何在HighCharts统计图表下生成表格,二者相互结合,可以对数据进行更好的统计分析.在统计的同时,如果需要想要及时查看详细信息的话,就得再加一个功能,就是单击柱形体,显示该项下的详 ...

随机推荐

  1. clnt_create: RPC: Program not registered

    原因:[root@nfs nfs]# systemctl start nfs-utils 解决方法:[root@nfs nfs]# systemctl start nfs

  2. pillow生成验证码

    1.结果 2.安装pillow cmd里进入python,pip install pillow,需要等一段时间 3.代码 from PIL import Image, ImageDraw, Image ...

  3. Oracle SQL——varchar2() 和 char()关联查询 存在空格

    背景 表dbcontinfo 字段loanid,类型为varchar2(60) 表dbloanbal 字段loanid,类型为char(60) loanid字段实际长度为24位 问题 两张表dbloa ...

  4. 配置Jenkins 实现自动发布maven项目至weblogic（svn+maven+weblogic12c）

    Jenkins安装完成之后,需要我们对其配置,然后才可以实现自动部署项目. 前提 防火墙开放weblogic的7001端口 Linux(CentOS):firewall-cmd --zone=publ ...

  5. Python3基础 list reverse 反转列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. Python常用库之Pilow

    基本用法 静态方法 PIL.Image.open(fp, mode=’r’) 传入文件路径(str),返回一个image对象 PIL.Image.alpha_composite(im1, im2) 混 ...

  7. dart实例

    import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends S ...

  8. 修改控制台为Consolas字体

    windows下控制台字体修改为Consolas字体比较好看,修改步骤如下: 临时修改 命令行cmd命令进入控制台,输入chcp 437命令,执行. 右键点击标题栏进入属性,修改字体为Consolas ...

  9. JavaI/O（输入/输出）

    File类 通过File类可以在程序中操作文件和目录,File能新建.删除.重命名文件和目录,但是不能访问文件内容本身. 理解I/O流 流(stream)是从起源(source)到接收(sink)的有 ...

  10. [easyui] - 在easyui的table中展示提示框

    因为在easyui的table中字段过多,而无法展示全时,被迫只能使用这个方法. 使用方式: 在 $('#dg').datagrid({ 后的 queryParams: form2Json('sear ...