mouseenter
要在content
上触发, 实在搞不明白了, 我就问了一下导师, 她告诉我试一下pointer-events
, 我当时自己写了 demo, 然后来了句: 妙啊.pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的触发者 .
<div class='mask'>
上添加一个pointer-events: none
即可, 我们先来看看打印顺序:pointer-events:none
的解释:元素永远不会成为鼠标事件的触发者。但是,当其后代元素的 pointer-events 属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
.mask
上添加了这个属性, 它就不会成为鼠标事件的触发者了, 这样子就鼠标事件的触发者就顺利的成为了.content
, 就成功的解决了这个问题..mask
加了一个孩子.mask-child
, 然后也监听它的mouseenter
事件, 我们再来看看效果:mask
的mouseenter
事件, 所以我们就知道了, 如果你想跳过某一个元素的指定事件, 我们可以在它上面设置一个pointer-events:none
, 但是需要注意的是, 其后代不要再指定pointer-events
属性, 不然还是会失效的.:hover
、:active
等伪类也不会触发.hover
效果, 我们可能会这样子写:.disable
放在下面, 因为 css 的优先级啦.<style>.container {width: 500px;height: 300px;background: red;position: relative;}.mask {width: 100%;height: 100%;background: green;position: absolute;z-index: 2;}.content {width: 500px;height: 300px;background: blue;}</style><body><div class="container"><div class="mask"></div><p class="content">我是内容</p></div><script>const mask = document.querySelector('.mask');const container = document.querySelector('.container');const content = document.querySelector('.content');content.addEventListener('mouseenter', () => {console.log('content mouseenter');});mask.addEventListener('mouseenter', () => {console.log('mask mouseenter');});container.addEventListener('mouseenter', () => {console.log('container mouseenter');});</script></body>
// container mouseenter// mask mouseenter
/* Global values */pointer-events: inherit;pointer-events: initial;pointer-events: unset;/* Keyword values */pointer-events: auto;pointer-events: none;/* 以下的属性仅适用于SVG */pointer-events: visiblePainted;pointer-events: visibleFill;pointer-events: visibleStroke;pointer-events: visible;pointer-events: painted;pointer-events: fill;pointer-events: stroke;pointer-events: all;
// container mouseenter// content mouseenter
<style>.mask-child {width: 200px;height: 300px;background: yellow;pointer-events: auto;}</style><body><div class="container"><div class="mask"><div class="mask-child"></div></div><p class="content">我是内容</p></div><script>const maskChild = document.querySelector('.mask-child');maskChild.addEventListener('mouseenter', () => {console.log('maskChild mouseenter');});</script></body>
// container mouseenter// mask mouseenter// maskChild mouseenter
<style>button {pointer-events: none;}</style><button onclick="handleClick()">测试</button><script>function handleClick() {console.log('handleClick');}</script>
<p class="content disable"></p><style>.content:not(disable):hover {}</style>
<p class="content disable"></p><style>.content.disable {pointer-events: none;}.content:hover {}</style>
<p class="content disable"></p><style>.content:hover {background: black;}.content.disable {background: yellow;}</style>