<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS:pointer-events</title>

<style type="text/css">

.overlay1 {

width:200px;

height:30px;

background:green;

position:absolute;

top:5px;

left:5px;

opacity:0.5;

}

.overlay2 {

width:200px;

height:30px;

background:gold;

position:absolute;

top:40px;

left:5px;

opacity:0.5;

}

.pointer{pointer-events:none;}

</style>

<script type="text/javascript">

window.onload = function(){

document.getElementById('chx').onclick = function(){

document.getElementById('a').className

= "overlay1 " + ((this.checked)? "pointer" : "");

document.getElementById('b').className

= "overlay2 " + ((this.checked)? "pointer" : "");

}

}

</script>

</head>

<body>

<div id="a" class="overlay1"></div>

<div id="b" class="overlay2"></div>

<a href="http://www.baidu.com">baidu</a>

<br/><br/>

<span onclick="alert(3);">span under the div</span>

<p>

<input id="chx" type="checkbox">

<label for="chx">开启穿透点击</label>

</p>

</body>

</html>

　　

css3-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. mst总结

     1.jsonp跨域 Jsop的原理:利用script不存在跨域的问题,动态创建script标签,把需要请求的数据源地址赋值给其src属性,并且指定一个回调函数,从而接受到我们想要的数据 后台设置下 ...

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

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

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

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

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

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

随机推荐

  1. 关于VMware虚拟机启动EFI/UEFI支持

    作为较新计算机和操作系统用于引导计算机的技术,可扩展固件接口 (EFI) 正在取代 BIOS.EFI 有时称为统一可扩展固件接口 (UEFI). 使用VMware创建虚拟机,默认还是会使用传统的BIO ...

  2. 02-Python基础1

    本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 ...

  3. input搜索框的搜索功能

    如图,想要实现输入关键词,点击搜索按钮或者回车键都能进行搜索并返回. html部分代码如下: js部分—— function entersearch(){ var event = window.eve ...

  4. vue2.0+Element UI 实现动态表单（点击按钮增删一排输入框）

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

  5. 关于"touchstart与click同时触发"问题

    点击事件可以分解成多个事件: 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->  click 由于移动设备能够同时 ...

  6. RabbitMQ系列之【CentOS6.5安装RabbitMQ】

    环境准备 操作系统:CentOS 6.5 Final RabbitMQ: 3.1.5 Python: 2.7.11 ErLang: R16B02 安装预环境(少什么安装什么) yum -y insta ...

  7. java处理csv文件上传示例

    前言:示例只是做了一个最最基础的上传csv的示例,如果要引用到代码中去,还需要根据自己的业务自行添加一些逻辑处理. ReadCsvUtil工具类 package com.hanfengyeqiao.g ...

  8. Codeforces Round #647 (Div. 2)

    Problem A https://codeforces.com/contest/1362/problem/A 判断x/y是不是2的k次方, 如果是 k/3 + (k%3)/2 + (k%3%2)即为 ...

  9. Mybatis一对多或多对多只能查出一条数据解决策略

    原文:https://blog.csdn.net/ren814/article/details/81742242 <resultMap id="menuModelMap" t ...

  10. 【Spring注解驱动开发】面试官：如何将Service注入到Servlet中？朋友又栽了！！

    写在前面 最近,一位读者出去面试前准备了很久,信心满满的去面试.没想到面试官的一个问题把他难住了.面试官的问题是这样的:如何使用Spring将Service注入到Servlet中呢?这位读者平时也是很 ...