图片阻止父元素的点击事件,导致无法触发跳转
问题:盒子里面包含图片,盒子有跳转事件,但是在百度浏览器中点击一直展示图片,不跳转。
原因:在某些情况下,图片可能会阻止父元素的点击事件,导致无法触发跳转。这可能是因为图片元素的点击事件冒泡到了父元素,而父元素的点击事件被图片元素捕获并处理了。
1 <div class="con"> 2 <img src="./img.jpg" alt=""> 3 </div>
需要阻止图片的冒泡行为
1 .con{pointer-events: auto;} 2 img{pointer-events: none;}
.con{pointer-events: auto;}表示将.con类的元素的pointer-events属性设置为auto,这意味着该元素可以接收鼠标事件。而img{pointer-events: none;}表示将所有img元素的pointer-events属性设置为none,这意味着图片元素不会接收鼠标事件。
这样的设置可以确保图片不会阻止盒子的跳转事件。
注意:也会阻止父元素的 onmousemove之后的 onmouseup事件,
今天在做 div拖动的时候遇到了这个BUG,触发div的onmousemove之后,就一直无法触发 div 的onmouseup事件,最后在 div中image 添加了 img { pointer-events: none;},就可以了
浙公网安备 33010602011771号