Home > Web Front-end > HTML Tutorial > css屏蔽元素的鼠标事件pointer-events_html/css_WEB-ITnose

css屏蔽元素的鼠标事件pointer-events_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:28:47
Original
2039 people have browsed it

// 屏蔽点击

$('body').css('pointer-events', 'none');

//恢复默认

$('body').css('pointer-events', 'auto');

 

用处:

   可以在弹出层的时候或者fixed定位时,设置下面元素的鼠标事件

 

var pop = function(msg, delay, cb) {        var _msg = msg || '网络不给力,请稍后再试试吧',            _delay = delay || 3000;        if($('#pop').hasClass('hide')) {            $('#pop').removeClass('hide')        }        if($('#pop').length > 0) {            $('#pop').html(_msg);        } else {            $('body').append('<div id="pop">'+_msg+'</div>');        }        setTimeout(function() {            $('#pop').addClass('hide');            cb && cb()        }, _delay)    }
Copy after login

  以上是一个简单的吐司效果(文字在中间显示出来,3秒后自动消失)

在显示期间,下面的body元素,屏蔽点击事件,

消失后,恢复body点击事件。 这样一来不用去给body临时绑定事件和去除事件绑定。

pointer-events 的多个状态值

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
Copy after login

 不过在浏览器中   auto 和 none 就可以了

auto:效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。。

none:元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template