图片阻止父元素的点击事件,导致无法触发跳转
问题:盒子里面包含图片,盒子有跳转事件,但是在百度浏览器中点击一直展示图片,不跳转。
原因:在某些情况下,图片可能会阻止父元素的点击事件,导致无法触发跳转。这可能是因为图片元素的点击事件冒泡到了父元素,而父元素的点击事件被图片元素捕获并处理了。
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;},就可以了
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
2014-02-28 基元线程同步构造 AutoResetEvent和ManualResetEvent 线程同步