Maison > interface Web > tutoriel HTML > css屏蔽元素的鼠标事件pointer-events_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:28:47
original
2031 Les gens l'ont consulté

// 屏蔽点击

$('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)    }
Copier après la connexion

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

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

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

pointer-events 的多个状态值

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
Copier après la connexion

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

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

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

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal