各浏览中对 MAP 和 AREA 元素的事件处理行为不同

from : http://w3help.org/zh-cn/causes/HO2009

标准参考

MAP 和 AREA 元素通常组合起来使用为图片要设置一个超链接区域。使用时将 IMG 元素的 "usemap" 属性¹关联到一个 MAP 元素上，这个 MAP 元素的 "name" 属性值要与 IMG 元素的 "usemap" 属性值相同。AREA 元素嵌入在 MAP 元素中，用来指定该图片中超链接区域的形状 ("shape") 、所处位置 ("coords")、链接地址 ("href") 等。

HTML4.01 规范中对 AREA 元素的 "shape" 和 "coords" 属性的描述如下：

• shape：可取值为 default | rect | circle | poly，用来指定超链接区域的形状。
  • default：将整个图片定义为超链接区域；
  • rect：定义一个矩形超链接区域；
  • circle：定义一个圆形超链接区域；
  • poly：定义一个多边形超链接区域；
• coords：用来指定超链接区域在屏幕上的位置和形状，确定位置的坐标值和坐标值的书写顺序由所设定的形状来决定，确定位置与形状的可能性组合如下
  • rect：left-x，top-y，right-x，bottom-y ，通过两个点来确定一个矩形的左上角与右下角的坐标，从而确定一个矩形区域；
  • circle：center-x, center-y, radius ，通过一对坐标值确定一个点，并以这个点为圆心，"radius" 值为半径确定一个圆形的超链接区域，当 "radius" 值为百分数时，依照被关联对象的 min(width，height)计算出半径的数值；
  • poly：x1, y1, x2, y2, ..., xN, yN ，每两个为一对坐标用来确定一个点，当这些点的坐标值不全相同时，以第一个点为该多边形的起始点，最后一个点为多边形的终点，将这些点连接起来围成一个多边形；

关于 MAP 和 AREA 元素的更多内容，请参考 CSS2.1 规范 13.6.1 Client-side image maps: the MAP and AREA elements 中的内容。

注 1：要关联 MAP 元素的 IMG 元素的 "usemap" 属性值必须以 "#" 开头并且加上要关联的 MAP 元素的 "name" 属性值。

问题描述

MAP 元素会影响指向 MAP 的元素，其父元素 A 元素的默认链接行为。

IE6 IE7 IE8 中，产生自 MAP 元素的事件冒泡路径，不依赖 MAP 本身所处的元素嵌套规则，他会执行到引向 MAP 的元素嵌套结构中。

造成的影响

页面无法按照预期结果执行导航，并且意外的触发原本不应在事件冒泡路径上的事件处理程序。

受影响的浏览器

所有浏览器

问题分析

1. 对 A 元素默认链接行为的阻止

分析以下代码：img-map.html

<a href="http://www.google.com" target="_blank">
  <img src="Chrome1.png" usemap="#Map1" style="border:none" /> text
</a>
<map name="Map1"></map>

A 元素链接到 Google 站点，元素内嵌套 IMG 标签，此图片使用 "usemap" 属性关联到名为 "Map1" 的 MAP 元素中。

分别点击 A 元素的图片区域及文本区域，各浏览器实际结果处理如下：

IE6 IE7 IE8 Firefox Chrome Safari Opera 点击图片区域 点击文本区域

失效	有效
有效	有效

可见，在 IE6 IE7 IE8 中，如果 A 元素内带有使用 usemap 属性关联了 MAP 元素的 IMG 元素，将导致超链接中该图片区域默认行为失效。

2. MAP AREA 元素的事件冒泡机制差异

分析以下两组代码：map-area_event_bubble.html

<script>
  function clicked(i, o) {
    document.getElementById('info' + i).innerHTML += o.tagName + ' Tag Clicked.<br />';
  }
</script>

<div>
  MAP 位于 A 之外，请点击图片：<br />
  <a href="#" onclick="clicked(1, this)">
    <img src="Chrome1.png" border="0" usemap="#Map1" onclick="clicked(1, this)" />
  </a>
  <map name="Map1" onclick="clicked(1, this)">
    <area shape="rect" coords="0,0,90,90" onclick="clicked(1, this)">
  </map>
</div>
<div id="info1"></div>
<br />
<div>
  MAP 位于 A 之内，请点击图片：<br />
  <a href="#" onclick="clicked(2, this)">
    <img src="Chrome1.png" border="0" usemap="#Map2" onclick="clicked(2, this)" />
    <map name="Map2" onclick="clicked(2, this)">
      <area shape="rect" coords="0,0,90,90" onclick="clicked(2, this)">
    </map>
  </a>
</div>
<div id="info2"></div>

两组代码中均为 AREA MAP A IMG 元素写入内联 "click" 事件，第一组为 MAP 标签没有嵌套在 A 标签内情况，第二组为 MAP 标签嵌套在 A 元素内情况。

根据浏览器事件冒泡机制，点击 AREA 元素，在触发完成自身的 "click" 事件后，AREA 元素的父级元素直至到视口元素为止，都会依次触发他们的 "click" 事件。因此根据规范描述，第一组元素应会根据元素嵌套关系，实现事件冒泡机制，依次触发 AREA MAP 元素的 "click" 事件。而第二组则是，依次触发 AREA MAP A 元素的 "click" 事件。

尝试点击 AREA 元素，各浏览器实际结果处理如下：

IE6 IE7 IE8 Firefox Chrome Safari Opera MAP 位于 A 之外 MAP 位于 A 之内

AREA Tag Clicked. MAP Tag Clicked. IMG Tag Clicked. A Tag Clicked.	AREA Tag Clicked. MAP Tag Clicked.
AREA Tag Clicked. MAP Tag Clicked. IMG Tag Clicked. A Tag Clicked.	AREA Tag Clicked. MAP Tag Clicked. A Tag Clicked.

可见，IE6 IE7 IE8 中即使 MAP 元素没有嵌套在 A 元素内，其事件冒泡机制依然会通过 IMG 元素关联起来，这显然是个不符合事件冒泡机制的实现扩展。

而其他浏览器则是严格根据元素实际嵌套关系产生事件冒泡。

3. MAP AREA 标签对 A 标签的默认行为支持差异

结合之前的第一和第二点差异，我们构造出如下两组用例：

<script>
  function clicked(i, o) {
    document.getElementById('info' + i).innerHTML += o.tagName + ' Tag Clicked.<br />';
  }
</script>

<div>
  MAP 位于 A 之外，请点击图片：<br />
  <a href="http://www.google.com" onclick="clicked(1, this)" target="_blank">
    <img src="Chrome1.png" border="0" usemap="#Map2" />
  </a>
  <map name="Map2">
    <area shape="rect" coords="0,0,90,90" onclick="clicked(1, this)">
  </map>
</div>
<div id="info1"></div>
<br />
<div>
  MAP 位于 A 之内，请点击图片：<br />
  <a href="http://www.google.com" onclick="clicked(2, this)" target="_blank">
    <img src="Chrome1.png" border="0" usemap="#Map1" />
    <map name="Map1">
      <area shape="rect" coords="0,0,90,90" onclick="clicked(2, this)">
    </map>
  </a>
</div>
<div id="info2"></div>

第 1 组代码中，MAP 处于 A 标签外，第 2 组 MAP 处于 A 标签内。

两组代码中均使用， A 元素嵌套 IMG 和 MAP 元素，IMG 元素使用 "usemap" 属性指向 MAP 元素， MAP 中使用 AREA 元素创造出足以覆盖 IMG 区域的链接区。

根据之前说明可知，在第 2 组用例中，点击图片区域，会先触发 "AREA" 元素的 "click" 事件。然后根据事件冒泡机制，会使父元素 A 也产生 "click"。A 元素内存在 "href" 属性并链接到 Google 首页上，被点击后应将该页导航到 Google。

运行用例，来看不同的浏览器中的表现结果汇总如下：

IE6 IE7 IE8 Firefox Chrome Safari Opera 第 1 组 第 2 组

A 元素导航失效	事件冒泡不会到达 A 元素，不产生导航行为。	事件冒泡不会到达 A 元素，不产生导航行为。
A 元素导航失效	A 元素导航失效	导航到 Google

根据上表可见：

• IE6 IE7 IE8 中由于文章最开始说明的，如果 A 标签内包含有使用 MAP 的 IMG 标签，将导致 A 链接整体失效；
• Firefox 中，即使点击事件冒泡到 A 标签中，也不会触发 A 标签的默认导航行为发生；
• Chrome Safari Opera 均处理正常。

解决方案

• 注意 MAP 标记与其他标记的嵌套关系，IE6 IE7 IE8 中的 MAP 冒泡机制是根据指向 MAP 标记的标记位置决定的。如果期望所有浏览器冒泡路径基本一致，可以将 MAP 标记放在引用 MAP 的标记的兄弟级别。
• 注意 A 标记的默认导航行为触发限制，即使标签嵌套一致，点击事件冒泡路颈 A 标记，也不会在 IE6 IE7 IE8 Firefox 中触发浏览器默认行为产生导航。可以利用 A 标记也会执行点击事件冒泡的特性，使用 A 标记的 "click" 事件代替 "href" 属性执行页面跳转工作。