HTML中area标签ping属性用于点击跟踪的配置方法-html教程-PHP中文网

area标签的ping属性在现代浏览器中基本不可用，因chrome 61+已移除、firefox从未实现、safari和edge均无视，点击时不会发送ping请求；应改用事件委托监听map点击，通过data-track匹配area并用image打点。

html中area标签ping属性用于点击跟踪的配置方法

area 标签的 ping 属性在现代浏览器中基本不可用，不建议用于点击跟踪。

为什么 `ping` 属性对 `area` 无效

虽然 HTML5 规范理论上允许 area 元素使用 ping 属性（类似 a 标签），但实际支持极差：Chrome 自 61 版起已移除支持，Firefox 从未实现，Safari 和 Edge 均无视该属性。点击 area 时，浏览器不会发送任何 PING 请求。

替代方案：用 JavaScript 捕获 `area` 点击并手动上报

必须监听 map 或其父容器的点击事件，再通过坐标/ID 匹配触发的 area，然后调用 fetch 或 Image 打点：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

@@##@@
<map name="mymap"><area shape="rect" coords="0,0,100,100" data-track="button-a">
<area shape="circle" coords="200,200,50" data-track="button-b"></map><script>
document.querySelector('map').addEventListener('click', (e) => {
  if (e.target.tagName === 'AREA') {
    const trackId = e.target.dataset.track;
    // 用 Image 避免阻塞，兼容性好
    new Image().src = '/track?event=' + encodeURIComponent(trackId);
  }
});
</script>

不要直接给每个 area 绑 onclick —— 响应式地图中 coords 可能随缩放变化，委托更可靠
避免用 fetch 发送跟踪请求 —— 它可能被浏览器后台丢弃（尤其页面即将跳转时）
data-track 比 id 更适合语义化标识，也方便后续统一埋点规则

如果必须用原生 `ping`，只能换用 `a` + CSS 覆盖模拟热点

把图像包装成 a 链接，用绝对定位的透明 a 覆盖热点区域，这样 ping 才真正生效：

<div style="position:relative">
  @@##@@
  <a href="/target-a" ping="/track?a" style="position:absolute;top:0;left:0;width:100px;height:100px;display:block;"></a>
  <a href="/target-b" ping="/track?b" style="position:absolute;top:200px;left:200px;width:100px;height:100px;border-radius:50%;display:block;"></a>
</div>