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

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

WBOY
Freigeben: 2016-06-24 11:28:47
Original
2025 Leute haben es durchsucht

// 屏蔽点击

$('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)    }
Nach dem Login kopieren

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

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

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

pointer-events 的多个状态值

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
Nach dem Login kopieren

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

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

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage