CSS3中的pointer-events

代码如下:


!DOCTYPE html
html
head lang="en"
    meta charset="UTF-8"
    title/title
    style
        .none{
            pointer-events: none;
        }
    /style
/head
body
a href="#1" class="auto"auto1/a
a href="#2" class="none"none/a
a href="#3" class="auto"auto2/a
/body
/html


注:要想真的将元素鼠标和键盘事件都去掉,可以使用:无href + pointer-events:none

下面内容转载自:http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

四、实际应用

在IE浏览器下,fi< er滤镜实现的半透明渐变背景元素本身就是镂空的穿透的,即我们可以使用鼠标选择或点击半透明背景后面的元素,如下截图:

但是对于FireFox或是Chrome等现代浏览器,则半透明覆盖下面的元素会被遮住,无法选择或点击:

此时,我们可以利用pointer-events:none的“幻影”特性,对半透明覆盖元素应用pointer-events:none声明使其可以鼠标穿透,于是,半透明覆盖后面的文字可以选择了,链接也可以点击了:

五、兼容性

目前FireFox浏览器,Chrome都支持。Opera以及IE不支持。

六、pointer-events扩展之浏览器支持的JS判断

考虑到某些浏览器不支持CSS3 pointer-events属性,因此,在实际应用的时候,可能要对不同浏览器做不同处理,这个时候就需要判别当前用户浏览器是否支持pointer-events. 下面就是JS实现验证的代码:


var supportsPointerEvents = (function(){
  var dummy = document.createElement(‘_‘);
  if(!(‘pointerEvents‘ in dummy.style)) return false;
  dummy.style.pointerEvents = ‘auto‘;
  dummy.style.pointerEvents = ‘x‘;
  document.body.appendChild(dummy);
  var r = getComputedStyle(dummy).pointerEvents === ‘auto‘;
  document.body.removeChild(dummy);
  return r;
})();



上面的代码其实对于浏览器是否支持其他CSS3属性也是比较受用的。

该验证idea来自Martin Auswöger (https://github.com/ausi/Feature-detection-technique-for-pointer-events)

七、pointer-events扩展之幻影特性的JS替代实现

直接代码(基于jQuery):


function noPointerEvents (element) {
    $(element).bind(‘click mouseover‘, function (evt) {
        this.style.display = ‘none‘;
        var x = evt.pageX, y = evt.pageY,
        under = document.elementFromPoint(x, y);
        this.style.display = ‘‘;
        evt.stopPropagation();
        evt.preventDefau< ();
        $(under).trigger(evt.type);
    });
}



上面展示代码中有个比较有意思的方法就是elementFromPoint,这东西兼容性还是很不错的。具体可参见我之前这篇“CSSOM视图模式(CSSOM View Module)相关整理”(较长)中的Part 三部分,有demo示意。

八、小卖弄:a标签按钮完全禁用实例

最后,小小卖弄下,综合本文杂七杂八的内容,做个可能没多大实际意义的实例,就是上面唠叨了很多的a标签按钮完全禁用效果。

按钮UI借鉴新浪微博。

您可以狠狠地点击这里:a标签按钮完全禁用demo卖弄版

:本demo是为了应用CSS3 pointer-events属性而使用了pointer-events,实际应用无需如此折腾。

本demo应用了上面浏览器是否支持pointer-events属性的JS扩展。完整JavaScript代码如下:


var supportsPointerEvents = (function(){
    //上面验证浏览器支持pointer-events属性代码
})();

var oArea = document.getElementById("testArea"),
     oButton = document.getElementById("testButton");

oArea.onkeyup = function() {
    var len >h = this.innerHTML.len >h;
    if (len >h == 0 || len >h  140) {
        oButton.className = "test_button test_button_disabled";
        oButton.removeAttribute("href");    
    } else {
        oButton.className = "test_button";
        oButton.href = "javascript:";        
    }
};

oButton.onclick = function() {
    //如果支持CSS3 pointer-events,CSS自动判定是否执行点击事件,脚本这边可以无顾忌执行弹出
    //如果不支持CSS3 pointer-events
    //通过按钮状态判定是否弹出
    if (supportsPointerEvents || (!supportsPointerEvents  this.href)) {
        alert("发送成功");
    }
    return false;
};



通过控制href属性实现完全意义上的禁用。

转载:http://www.cnblogs.com/shytong/p/5152476.html

CSS3中的pointer-events

原文地址:http://www.cnblogs.com/BluceLee/p/7264948.html


最新回复(0)
/jishu9XPfRil14zWfPfi_2BbEgDDP706gX21Ns_2FEdidqw_3D_3D4719320
8 简首页