Web常用工具 二维码美化 在线压缩 JavaScript AI工具汇总网站 ASP.NET控件源码查询 W3CHTML W3SCHOOL TypeScript 开源中国 51aspx github codeproject SQLBACKUP 几种排序算法比较 SQL中deny权限 MSDN下载 HttpWebRequest类 HTML5 stackoverflow ASP.NET 页生命周期概述 IIS 5.0 和 6.0 的 ASP.NET 应用程序生命周期概述 [SQL Server]视图sys.sysprocesses brnshop学习 SQL视频 Fiddler帮助文档 Sprint.Net SQLServer牛人博客 codeplex IIS官网 IE11 Developer Jquery源码视频上 Jquery源码视频下 Jquery Bugs jquery.miaov.com 正则表达式 Jquery API 1.9 Service Broker Javascript Object中的方法讲解 Microsoft webcast 微信开发接口 ECMAScript5 Underscore Jquery Bugs SQL存储过程事务嵌套 官网SQL事务锁 2345天气插件 Json数据查看 C++ jquery-plugin-validate 博学谷(传智播客) Swift视频 IOS代码论坛 SWIFT设计模式 操作系统下载 AngularJS VueJS ASPNETCORE 前端题库 Node.js ASPNETCORE 腾讯课堂 SwiftUI SwiftUI疑问解答 ADO.NET SMO 数字化企业网 Unicode码查询 Redis使用文档 .NET 微服务:适用于容器化 .NET 应用程序的体系结构 .NETCore5.0微软官方文档 CSS3.0 在 ASP.NET Core 中配置 Windows 身份验证 Maven使用教程 Maven Repository Thymeleaf Thymeleaf中文CSDN Spring官方文档 Spring中文文档 SpringBoot SpringData SVG在线设计工具 SVG教程01 SVG教程02 fontawesome图标库 mybatis官网 mybatis-spring中文 mysql教程 python教程 python的scrapy教程01 python的scrapy教程02 VS开发python xpath教程 腾讯向量数据库教程 JSZip浏览器内存中创建文件与文件夹 axios的使用文档 SheetJS(JS操作excel)的使用文档 金蝶云星空学习成长 常用接口调用 Three.js电子书 D3.js官网 anime.js官网 xlsx.js官网

huaan011

 

图片阻止父元素的点击事件,导致无法触发跳转

问题:盒子里面包含图片,盒子有跳转事件,但是在百度浏览器中点击一直展示图片,不跳转。

原因:在某些情况下,图片可能会阻止父元素的点击事件,导致无法触发跳转。这可能是因为图片元素的点击事件冒泡到了父元素,而父元素的点击事件被图片元素捕获并处理了。

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;},就可以了

posted on   华安  阅读(2)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
历史上的今天:
2014-02-28 基元线程同步构造 AutoResetEvent和ManualResetEvent 线程同步

导航

统计

点击右上角即可分享
微信分享提示