HTML的area标签配合jQuery绑定事件的实例-html教程-PHP中文网

area标签无法直接绑定jquery事件，应绑定到usemap关联的img上，通过坐标计算判断点击是否在rect/circle/poly区域内，需注意图片加载完成、移动端touch适配及poly射线法判断。

html的area标签配合jquery绑定事件的实例

area 标签本身不支持直接绑定 jQuery 事件

直接对 <area> 元素调用 $('area').on('click', handler) 大概率无效——因为 <area> 必须嵌套在 <map></map> 中，且依赖 <img usemap> 才能激活交互区域，浏览器对它的事件捕获非常有限，原生只响应 click（部分浏览器连 mouseenter 都不触发）。

真正可行的做法是：把事件绑定到对应的 <img> 上，再通过坐标计算判断是否落在某个 <area> 范围内。

确保 <img> 设置了 usemap 属性，且值与 <map name="xxx"></map> 的 name 匹配
<area> 必须有 shape（rect、circle、poly）和 coords，否则无法做坐标判断
jQuery 事件委托（如 $(img).on('click', ...)）比直接绑定更可靠，尤其在动态插入 <map></map> 时

用 jQuery 获取点击位置并匹配 rect/circle area

对 rect 和 circle 这类规则形状，手动解析 coords 并做简单数学判断即可，不需要引入额外库。

示例 HTML：

@@##@@
<map name="floor-map"><area shape="rect" coords="10,20,110,120" data-id="room-a">
<area shape="circle" coords="200,150,30" data-id="exit"></map>

对应 jQuery 处理逻辑：

html-ppt-to-pdf

将使用 `

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

下载

$('#floor-img').on('click', function(e) {
  const offset = $(this).offset();
  const x = e.pageX - offset.left;
  const y = e.pageY - offset.top;
<p>$('area').each(function() {
const $area = $(this);
const shape = $area.attr('shape');
const coords = $area.attr('coords').split(',').map(Number);</p><pre class="brush:php;toolbar:false;">if (shape === 'rect') {
  const [left, top, right, bottom] = coords;
  if (x >= left && x = top && y <p>});
});</p>

poly area 坐标判断要用点在多边形内算法

poly 的 coords 是一串交替的 x/y 坐标（如 "10,20,30,40,50,60"），不能靠矩形或圆公式判断，必须用射线法（Ray Casting）或叉积法。

建议直接使用轻量函数，比如这个无依赖的 isPointInPoly：

function isPointInPoly(x, y, coords) {
  let inside = false;
  for (let i = 0, j = coords.length - 2; i  y) !== (yj > y)) && (x <p>在上面的 click 回调里加一段：</p><pre class="brush:php;toolbar:false;">else if (shape === 'poly') {
  if (isPointInPoly(x, y, coords)) {
    console.log('hit poly:', $area.data('id'));
  }
}