CSS指针事件兼容解决方案

本文深入解析了CSS `pointer-events` 属性的真实兼容性现状，明确指出它从主流浏览器早期版本起就无需任何前缀（如 `-webkit-` 或 `-moz-`），所谓“加前缀”的做法不仅无效，还源于对其他需前缀属性的混淆或历史误用；文章重点揭示了真正影响功能落地的边界问题——如IE/Edge对表单控件的支持缺失、Firefox旧版对伪元素的限制、SVG引用穿透异常及IE11中父子元素事件继承bug，并给出务实方案：依赖CanIUse数据制定支持策略、结合ARIA与焦点管理保障可访问性、针对触控场景补充 `touch-action`、为老旧IE提供JS回退，同时强调一个关键认知盲区——`pointer-events: none` 并不阻止键盘聚焦，必须协同 `tabindex="-1"` 才能实现完整交互禁用。

pointer-events 属性本身没有浏览器前缀 —— 它不是那种需要 -webkit- 或 -moz- 的实验性属性。从 Chrome 4、Firefox 3.6、Safari 4 开始就已原生支持标准写法，IE 直到 11 才支持，且不带前缀。所以「给 pointer-events 加前缀」这个动作，本质上是无效的，也不存在所谓「-webkit-pointer-events」这种东西。

为什么有人误以为要加前缀

常见混淆来源有两个：

• 把 pointer-events 和真正需要前缀的属性（比如 transform、filter、backdrop-filter）混在一起处理，尤其在用 Autoprefixer 时没配好目标浏览器范围，导致工具“多此一举”输出了不存在的规则（实际会被忽略）
• 看到旧项目里写了类似 -webkit-pointer-events: none;，其实是开发者手误复制粘贴其他属性时带错了前缀，CSS 解析器直接丢弃该行，真正生效的只有后面的标准行
• 某些极老的 WebKit 内核（如 iOS 4.3 Safari）曾短暂支持过 -webkit-pointer-events，但早已废弃且无文档可查，现代开发中完全无需考虑

真正影响兼容性的边界情况

pointer-events 的兼容性问题不在前缀，而在语义支持范围和特殊元素限制：

• pointer-events: none 在 、</code>、<code><select></code> 等表单控件上，IE 10–11 和 Edge 12–18 不支持（会忽略），必须用 <code>disabled</code> 或 <code>tabindex="-1"</code> + <code>aria-disabled</code> 模拟</li> <li><code>pointer-events</code> 对伪元素（<code>::before</code> / <code>::after</code>）的支持：Firefox 直到 61 才支持，旧版需用 wrapper 元素替代</li> <li><code>pointer-events: auto</code> 在 SVG 中对 <code><use></code> 引用的图形，部分 Safari 版本有穿透行为异常，需显式在 <code><use></code> 上设置</li> <li>当父元素设为 <code>pointer-events: none</code>，子元素即使设 <code>pointer-events: auto</code>，在 IE 11 下仍可能无法响应（bug 级别，无前缀能修复）</li> </ul><h3>如何安全使用 pointer-events</h3> <p>不需要写前缀，但需要做这几件事：</p> <ul><li>确认目标浏览器最低版本：CanIUse 显示 <code>pointer-events</code> 在所有现代浏览器中均无前缀支持，<a target='_blank' href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5roGCUgXuytMyero1kfdrFjIfekraZo5qYYKbFeWmkx6eKnJOiaqTJ0LytmHqEz62tfs6BlbalhqqXp7B5hWmzgImpfY2dob7dr22DdqKZvoh-l5HdsbOSuoaasJ99aQ'>caniuse.com/pointer-events</a> 可查具体断点</li> <li>避免依赖它做关键交互阻断：比如遮罩层下透出按钮，应配合 <code>aria-hidden</code> 和键盘焦点管理，不能只靠 <code>pointer-events: none</code></li> <li>测试真实设备上的 touch 行为：iOS Safari 在某些 zoom 场景下会临时忽略 <code>pointer-events</code>，需加 <code>touch-action: none</code> 配合控制</li> <li>如果必须支持 IE 10/11，用 JavaScript fallback：<code>element.style.pointerEvents = 'none';</code> 后再手动监听 <code>click</code> 并 <code>event.stopPropagation()</code></li> </ul><p>最常被忽略的一点：<code>pointer-events</code> 不影响 <code>focus</code> 流程，也不阻止键盘操作。想让一个元素既不可点又不可聚焦，得同时加 <code>pointer-events: none</code> 和 <code>tabindex="-1"</code>（或移除 <code>tabindex</code>）。光加前缀解决不了这事 —— 因为它本来就没有前缀。</p><p>理论要掌握，实操不能落！以上关于《CSS指针事件兼容解决方案》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/578261.html" title="并发工具如何模拟高并发流量冲击" class="img_box"> <img src="/uploads/20260425/177711789569ecaac7bb06a.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="并发工具如何模拟高并发流量冲击">并发工具如何模拟高并发流量冲击 </a> <dl> <dt class="lineOverflow"><a href="/article/578261.html" title="并发工具如何模拟高并发流量冲击" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">并发工具如何模拟高并发流量冲击</dd> </dl> </div> <div class="cateItem"> <a href="/article/578263.html" title="K8s滚动更新与平滑升级Golang实现" class="img_box"> <img src="/uploads/20260425/177711795569ecab03d3c3c.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="K8s滚动更新与平滑升级Golang实现"> </a> <dl> <dt class="lineOverflow"><a href="/article/578263.html" class="aBlack" title="K8s滚动更新与平滑升级Golang实现">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">K8s滚动更新与平滑升级Golang实现</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/630166.html" class="img_box" title="用 IntersectionObserver 构建可停止的懒加载队列"> <img src="/uploads/20261008/1791430162-b2143f180d-4e92a306b7-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="用 IntersectionObserver 构建可停止的懒加载队列"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  2小时前  |   <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="懒加载">懒加载</a> <a href="javascript:;" class="aLightGray" title="IntersectionObserver">IntersectionObserver</a> <a href="javascript:;" class="aLightGray" title="前端队列">前端队列</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/630166.html" class="aBlack" target="_blank" title="用 IntersectionObserver 构建可停止的懒加载队列">用 IntersectionObserver 构建可停止的懒加载队列</a> </dt> <dd class="cont2"> <span><i class="view"></i>401浏览</span> <span class="collectBtn user_collection" data-id="630166" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/630144.html" class="img_box" title="前端状态更新频繁时，批处理与去抖分别解决什么"> <img src="/uploads/20261007/1791362972-ae57678373-4cae5f28c0-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端状态更新频繁时，批处理与去抖分别解决什么"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  21小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/630144.html" class="aBlack" target="_blank" title="前端状态更新频繁时，批处理与去抖分别解决什么">前端状态更新频繁时，批处理与去抖分别解决什么</a> </dt> <dd class="cont2"> <span><i class="view"></i>227浏览</span> <span class="collectBtn user_collection" data-id="630144" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/630120.html" class="img_box" title="可访问弹窗的焦点陷阱、关闭恢复与背景隔离"> <img src="/uploads/20261007/1791355130-00f20d91ca-0222176e54-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="可访问弹窗的焦点陷阱、关闭恢复与背景隔离"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  23小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/40050_new_0_1.html" class="aLightGray" title="可访问性">可访问性</a> · <a href="javascript:;" class="aLightGray" title="焦点陷阱">焦点陷阱</a> <a href="javascript:;" class="aLightGray" title="HTML dialog">HTML dialog</a> <a href="javascript:;" class="aLightGray" title="焦点恢复">焦点恢复</a> <a href="javascript:;" class="aLightGray" title="inert">inert</a> <a href="javascript:;" class="aLightGray" title="无障碍弹窗">无障碍弹窗</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/630120.html" class="aBlack" target="_blank" title="可访问弹窗的焦点陷阱、关闭恢复与背景隔离">可访问弹窗的焦点陷阱、关闭恢复与背景隔离</a> </dt> <dd class="cont2"> <span><i class="view"></i>309浏览</span> <span class="collectBtn user_collection" data-id="630120" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/630096.html" class="img_box" title="Web Worker 传大数据为何卡顿：复制与 Transferable 对比"> <img src="/uploads/20261007/1791347663-bc57e219c1-2eaf6c581d-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Web Worker 传大数据为何卡顿：复制与 Transferable 对比"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="ArrayBuffer">ArrayBuffer</a> <a href="javascript:;" class="aLightGray" title="postMessage">postMessage</a> <a href="javascript:;" class="aLightGray" title="前端性能">前端性能</a> <a href="javascript:;" class="aLightGray" title="Web Worker">Web Worker</a> <a href="javascript:;" class="aLightGray" title="Transferable">Transferable</a> <a href="javascript:;" class="aLightGray" title="structured clone">structured clone</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/630096.html" class="aBlack" target="_blank" title="Web Worker 传大数据为何卡顿：复制与 Transferable 对比">Web Worker 传大数据为何卡顿：复制与 Transferable 对比</a> </dt> <dd class="cont2"> <span><i class="view"></i>220浏览</span> <span class="collectBtn user_collection" data-id="630096" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/630072.html" class="img_box" title="Fetch 请求取消后，超时与用户中断要怎样区分"> <img src="/uploads/20261007/1791339534-45158fb1c5-5ccd1f1f65-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Fetch 请求取消后，超时与用户中断要怎样区分"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="javascript:;" class="aLightGray" title="请求超时">请求超时</a> <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="AbortSignal">AbortSignal</a> <a href="javascript:;" class="aLightGray" title="用户取消">用户取消</a> <a href="javascript:;" class="aLightGray" title="前端异常处理">前端异常处理</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/630072.html" class="aBlack" target="_blank" title="Fetch 请求取消后，超时与用户中断要怎样区分">Fetch 请求取消后，超时与用户中断要怎样区分</a> </dt> <dd class="cont2"> <span><i class="view"></i>466浏览</span> <span class="collectBtn user_collection" data-id="630072" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/630048.html" class="img_box" title="前端上传大文件：分片、暂停与失败续传怎样协作"> <img src="/uploads/20261007/1791332311-23a09cbb67-afa887518d-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端上传大文件：分片、暂停与失败续传怎样协作"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="/articletag/616_new_0_1.html" class="aLightGray" title="文件上传">文件上传</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="大文件上传">大文件上传</a> <a href="javascript:;" class="aLightGray" title="断点续传">断点续传</a> <a href="javascript:;" class="aLightGray" title="XMLHttpRequest">XMLHttpRequest</a> <a href="javascript:;" class="aLightGray" title="Blob.slice">Blob.slice</a> <a href="javascript:;" class="aLightGray" title="前端分片上传">前端分片上传</a> <a href="javascript:;" class="aLightGray" title="暂停上传">暂停上传</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/630048.html" class="aBlack" target="_blank" title="前端上传大文件：分片、暂停与失败续传怎样协作">前端上传大文件：分片、暂停与失败续传怎样协作</a> </dt> <dd class="cont2"> <span><i class="view"></i>371浏览</span> <span class="collectBtn user_collection" data-id="630048" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/630024.html" class="img_box" title="View Transition API 做列表到详情过渡的渐进增强"> <img src="/uploads/20261007/1791324659-0aa92aaa9b-36ff0ac403-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="View Transition API 做列表到详情过渡的渐进增强"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="javascript:;" class="aLightGray" title="列表详情">列表详情</a> <a href="javascript:;" class="aLightGray" title="View Transition API">View Transition API</a> <a href="javascript:;" class="aLightGray" title="前端渐进增强">前端渐进增强</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/630024.html" class="aBlack" target="_blank" title="View Transition API 做列表到详情过渡的渐进增强">View Transition API 做列表到详情过渡的渐进增强</a> </dt> <dd class="cont2"> <span><i class="view"></i>385浏览</span> <span class="collectBtn user_collection" data-id="630024" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/629998.html" class="img_box" title="用 CSS Container Query 让卡片按容器而不是视口响应"> <img src="/uploads/20261007/1791316248-6416323120-96bf208d1b-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="用 CSS Container Query 让卡片按容器而不是视口响应"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/629998.html" class="aBlack" target="_blank" title="用 CSS Container Query 让卡片按容器而不是视口响应">用 CSS Container Query 让卡片按容器而不是视口响应</a> </dt> <dd class="cont2"> <span><i class="view"></i>289浏览</span> <span class="collectBtn user_collection" data-id="629998" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/629976.html" class="img_box" title="Vite 环境变量为什么在配置加载时取不到"> <img src="/uploads/20261007/1791307141-690b348f90-01070631c9-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Vite 环境变量为什么在配置加载时取不到"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="javascript:;" class="aLightGray" title="环境变量">环境变量</a> <a href="javascript:;" class="aLightGray" title="vite">vite</a> <a href="javascript:;" class="aLightGray" title="loadEnv">loadEnv</a> <a href="javascript:;" class="aLightGray" title="vite.config">vite.config</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/629976.html" class="aBlack" target="_blank" title="Vite 环境变量为什么在配置加载时取不到">Vite 环境变量为什么在配置加载时取不到</a> </dt> <dd class="cont2"> <span><i class="view"></i>133浏览</span> <span class="collectBtn user_collection" data-id="629976" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/629964.html" class="img_box" title="React useOptimistic 怎么在请求失败时回滚列表"> <img src="/uploads/20261007/1791303554-4f7958db3a-e6ceaf866a-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="React useOptimistic 怎么在请求失败时回滚列表"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/629964.html" class="aBlack" target="_blank" title="React useOptimistic 怎么在请求失败时回滚列表">React useOptimistic 怎么在请求失败时回滚列表</a> </dt> <dd class="cont2"> <span><i class="view"></i>153浏览</span> <span class="collectBtn user_collection" data-id="629964" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/629940.html" class="img_box" title="URLPattern 怎么同时匹配域名和路径参数"> <img src="/uploads/20261006/1791295476-e816a2355a-f49a9a5f8c-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="URLPattern 怎么同时匹配域名和路径参数"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="前端路由">前端路由</a> <a href="javascript:;" class="aLightGray" title="hostname">hostname</a> <a href="javascript:;" class="aLightGray" title="URLPattern">URLPattern</a> <a href="javascript:;" class="aLightGray" title="pathname">pathname</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/629940.html" class="aBlack" target="_blank" title="URLPattern 怎么同时匹配域名和路径参数">URLPattern 怎么同时匹配域名和路径参数</a> </dt> <dd class="cont2"> <span><i class="view"></i>108浏览</span> <span class="collectBtn user_collection" data-id="629940" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/629916.html" class="img_box" title="Intl.DurationFormat 怎么本地化显示持续时间"> <img src="/uploads/20261006/1791287517-520c50a84e-214ee003d4-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Intl.DurationFormat 怎么本地化显示持续时间"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="Intl.DurationFormat">Intl.DurationFormat</a> <a href="javascript:;" class="aLightGray" title="前端国际化">前端国际化</a> <a href="javascript:;" class="aLightGray" title="持续时间格式化">持续时间格式化</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/629916.html" class="aBlack" target="_blank" title="Intl.DurationFormat 怎么本地化显示持续时间">Intl.DurationFormat 怎么本地化显示持续时间</a> </dt> <dd class="cont2"> <span><i class="view"></i>141浏览</span> <span class="collectBtn user_collection" data-id="629916" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight"> <!-- 右侧广告位banner --> <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13900.html" target="_blank" title="PubMedQA数据集详解：生物医学问答基准、功能与应用指南" class="img_box"> <img src="/uploads/20260908/6a9f83280940e7.65575695.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="PubMedQA数据集详解：生物医学问答基准、功能与应用指南" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13900.html" class="aBlack" target="_blank" title="PubMedQA">PubMedQA</a></dt> <dd class="cont1 lineTwoOverflow"> 深入了解PubMedQA生物医学问答数据集，涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用，助力提升NLP模型性能。 </dd> <dd class="cont2">375次使用</dd> </dl> </li> <li> <a href="/ai/13899.html" target="_blank" title="H2O EvalGPT：开源LLM大模型评估与排行榜工具" class="img_box"> <img src="/uploads/20260908/17887986376a9ee6adaf3f5.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="H2O EvalGPT：开源LLM大模型评估与排行榜工具" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13899.html" class="aBlack" target="_blank" title="H2O EvalGPT">H2O EvalGPT</a></dt> <dd class="cont1 lineTwoOverflow"> H2O EvalGPT是H2O.ai推出的开源LLM评估平台，提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能，助您快速选择最适合项目的高性能大语言模型。 </dd> <dd class="cont2">446次使用</dd> </dl> </li> <li> <a href="/ai/13898.html" target="_blank" title="LMArena是什么？伯克利AI模型评估平台使用指南与功能解析" class="img_box"> <img src="/uploads/20260908/6a9f862dbcfec7.27385604.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="LMArena是什么？伯克利AI模型评估平台使用指南与功能解析" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13898.html" class="aBlack" target="_blank" title="LMArena">LMArena</a></dt> <dd class="cont1 lineTwoOverflow"> LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制，用户可对比不同大模型回答并生成实时排行榜，助力开发者优化模型及用户选择最佳AI工具。 </dd> <dd class="cont2">454次使用</dd> </dl> </li> <li> <a href="/ai/13897.html" target="_blank" title="斯坦福HELM：大语言模型Holistic Evaluation整体评估框架详解" class="img_box"> <img src="/uploads/20260908/6a9f86b31ed789.06773114.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="斯坦福HELM：大语言模型Holistic Evaluation整体评估框架详解" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13897.html" class="aBlack" target="_blank" title="HELM">HELM</a></dt> <dd class="cont1 lineTwoOverflow"> 深入了解斯坦福推出的HELM（Holistic Evaluation of Language Models）大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景，涵盖准确性、公平性、鲁棒性等多维度指标，助力开发者全面优化语言模型性能。 </dd> <dd class="cont2">399次使用</dd> </dl> </li> <li> <a href="/ai/13896.html" target="_blank" title="MMBench详解：多模态大模型基准测试、功能特点与使用指南" class="img_box"> <img src="/uploads/20260908/6a9f86d3eed3e7.18564236.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MMBench详解：多模态大模型基准测试、功能特点与使用指南" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13896.html" class="aBlack" target="_blank" title="MMBench">MMBench</a></dt> <dd class="cont1 lineTwoOverflow"> MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台，提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景，助力开发者全面评估多模态模型性能。 </dd> <dd class="cont2">226次使用</dd> </dl> </li> </ul> </div> <!-- 相关文章 --> <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/621422.html" class="aBlack" title="智能体安全引领产业升级——国内AI安全产品市场深度分析">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></dt> <dd> <span class="left">2026-08-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/619053.html" class="aBlack" title="CSS变量简化按钮悬停效果技巧">CSS变量简化按钮悬停效果技巧</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/618916.html" class="aBlack" title="JavaScript符号类型详解与应用">JavaScript符号类型详解与应用</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/612539.html" class="aBlack" title="HTML剪贴板复制粘贴怎么用">HTML剪贴板复制粘贴怎么用</a></dt> <dd> <span class="left">2026-05-26</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <script src="/assets/js/frontend/common.js"></script> </body> </html>