在做移动端的页面时，经常会遇到点击（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. wait()和notify()的理解与使用

    void notify() Wakes up a single thread that is waiting on this object’s monitor. 译:唤醒在此对象监视器上等待的单个线程 ...

  2. 【python003-变量】

    变量 一.在使用变量之前,需要先对其进行赋值 二.变量命名的规则:可以包含字母,数字,下划线,但是不能以数字开头 三.字符串: 1.引号内的一切东西 2.python的字符串是要在两边加上引号,对于单 ...

  3. Apache下的ArrayUtils工具类总结

    ArrayUtils中的方法: 1.add():将给定的数据添加到指定的数组中,返回一个新的数组. 2.addAll():合并两个数组. 3.contains():检查该数据在该数组中是否存在,返回一 ...

  4. 集合05_Collections工具类

    Collections工具类 提供大量方法用于操作集合,比如排序,查找,替换 同步控制 提供synchronizedXxx()方法将指定集合类包装成线程同步的集合. List<String> ...

  5. 题解——洛谷P2781 传教（线段树）

    可以说是数据结构学傻了的典型案例了 昨天跳到这题上 然后思考了一下 噫!好!线段树裸题 然后打完板子,发现\(  n \le 10^9 \) 显然线段树直接做不太行 然后这题又只有普及的难度 然后我就 ...

  6. 4-Five-Youth

      ①People are always talking about 'the problem of youth'. If there is one--which I take leave to do ...

  7. Bytom矿池接入协议指南

    矿机配置 https://gist.github.com/HAOYUatHZ/a47400bde4a138825faef415387b532c 固件升级 https://service.bitmain ...

  8. pgAdmin的数据恢复

    DOC 本地添加server 1.设置备份.恢复的exe路径.一般在pgAdmin的安装路径下可以找到 2.恢复restore,备份backup

  9. SpringBoot学习(二)

    spring-boot-starter-parent Maven的用户可以通过继承spring-boot-starter-parent项目来获得一些合理的默认配置.这个parent提供了以下特性: 默 ...

  10. JS 上下文模式

    function test(){ console.log(a);//undefined; var a = 1; } test(); 也许你会遇到过上面这样的面试题,你只知道它考的是变量提升,但是具体的 ...