css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件

引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm

语法:

pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默认值:auto

适用于:所有元素

继承性:有

动画性:否

计算值:指定值

取值:

auto:
与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none:
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
其他值只能应用在SVG上。

说明:

设置或检索在何时成为属性事件的target。

  • 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。
  • 对应的脚本特性为pointerEvents

实例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            position: absolute;
            top: 0;
            left: 0;
        }
        .front{
            background-color: #c9e2b3;
            z-index: 10;
            width: 100px;
            height: 100px;
            pointer-events: none;
        }
        .back{
            background-color: #f99f9f;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <a class="front" onclick="alert(‘front!‘);"></a>
    <a class="back" onclick="alert(‘back!‘)"></a>
</body>
</html>

时间: 2024-08-24 15:22:45

css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件的相关文章

浏览器 Pointer Events

前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent PointEvent对象继承自MouseEvent,使用上也比较类似. mousedown -> pointerdown mouseenter -> pointerenter mouseleave -> pointerleave mousemove -> pointermove mouse

超简单CSS3实现圆角、阴影、透明效果

CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. 第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了. Html代码   .box { /* 首先定义要使用的4幅图像为背景图 */ background-image: url

《Effective Objective-C 2.0》—(第6-10条)—对象、属性、equalToString、关联对象

用OC等面向对象语言编程时,"对象"(object)就是"基本构造单元"(building block),开发者可以通过对象来存储并传递数据.在对象之间传递数据并执行任务的过程就叫做"消息传递"(Messaing). 当应用程序运行起来以后,为其提供相关支持的代码叫做"Objective-C运行期环境"(Objevtive-C runtime),它提供了一些使得对象之间能够传递消息的重要函数,并且包含创建类实例所用的全部逻辑.

JavaScript原生对象属性和方法详解——Array对象 转载

length 设置或返回 数组中元素的数目. 注意:设置 length 属性可改变数组的大小.如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失.如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined.所以length不一定代表数组的元素个数. var arr = new Array(3) arr[0] = "John" arr[1] = "Andy" arr[2] = "Wendy" cons

JavaScript的事件对象_鼠标事件

鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等. 一.鼠标按钮 只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发 click 事件,因此检测按钮的信息并不是必要的. 但对于 mousedown 和 mouseup 事件来说,则在其 event 对象存在一个 button 属性,表示按下或释放按钮. <script type="text/javascript"> window.onload

Java 并发编程(二)对象的不变性和安全的发布对象

一.不变性 满足同步需求的另一种方法是使用不可变对象(Immutable Object).到目前为止,我们介绍了许多与原子性和可见性相关的问题,例如得到失效数据,丢失更新操作或光查到某个对象处于不一致的状态等等,都与多线程视图同时访问同一个可变的状态相关.如果对象的状态不会改变,那么这些问题与复杂性也就自然消失了. 如果某个对象在被创建后其状态就不能被修改,那么这个对象就被成为不可变对象.线程安全型是不可变对象的固有属性之一,他们的不变性条件是由构造函数创建的,只要他们的状态不改变,那么这些不变

函数可以返回一个局部对象,而不能返回一个局部对象的引用(指针):

函数可以返回一个局部对象,而不能返回一个局部对象的引用(指针):当函数返回一个局部对象时,虽然这个对象已经释放,但是返回时会产生一个临时的对象.而当返回一个局部对象的引用时,这个对象已经不存在了.这就要求在函数参数中,包含一个引用或指针.int &func(int a,int b,int &retsult){ retsult = a + b; return &retsult}但是如下代码是错误的(返回局部对象的引用)int &func(int a,int b){ int &

访问修饰限定符的简单总结、final/abstruct/interface对类的限制、自动加载机制、序列化与反序列化【数据持久化和对象的序列化问题】、对象的拷贝(按引用是因为对象标识)和克隆(__clone方法中的this指向)

1.针对访问修饰限定符的理解只需要两点:(1)针对的是类的概念和访问代码的位置来确定是否能够访问(2)对访问修饰限定符的使用时只需要对该成员的使用场景注意即可[也就是内部,继承类,外部进行访问的权限] 不需要对内部进行太多理解[需要对php底层理解时进行理解] [重点][用途]通过访问修饰限定符将内部成员的权限合理的限制,然后再使用公共接口来调用这个基本服务,保证外部不能访问其内部的构件[这样既能够通过类内的设置,将内部的功能实现更好的限制,只有最外层的接口可以正常被访问到,而不了解内部的业务]

javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法

javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法 前言 在js中,数组和对象的复制假设使用=号来进行复制.那仅仅是浅拷贝. 例如以下图演示: 如上.arr的改动,会影响arr2的值,这显然在绝大多数情况下,并非我们所须要的结果. 因此,数组以及对象的深拷贝就是javascript的一个基本功了. 数组的深拷贝 条条大道通罗马,实现数组的深拷贝.是有好几种方法的.举比例如以下: for 循环实现数组的深拷贝 for循环是很好用的.假设不知道高级方法.通过for循环可以完毕我们