javascript - 如何防止图像 map 区域点击传播到链接？

Question

我有一个 HTML 图像 map ，其中有几个区域带有链接。我还有一些 Javascript 功能，在某些情况下，这些功能会覆盖某些特定区域的图像映射的默认功能。

我已经通过这个函数将我的函数附加到我想要的区域(其中 el 是元素，eventName 是事件的名称，eventHandler 是实际的功能):

function bindEvent(el, eventName, eventHandler) 
{
  if (el.addEventListener)
  {
    el.addEventListener(eventName, eventHandler, false); 
  } 
  else if (el.attachEvent)
  {
    el.attachEvent('on'+eventName, eventHandler);
  }
}

所以通过我的自定义处理程序，我正在做这样的事情:

    function onAreaClick(e)
    {
             //my custom code here

        e.cancelBubble = true;
        if(e.stopPropagation) 
               e.stopPropagation();

        return false;
    }

    //...
    //assume looping through all areas of the imagemap here, with each element referred to by the variable area
    bindEvent(area, 'click', onAreaClick);

onAreaClick 函数实际上触发正常，但是我无法让事件停止传播。我尝试了 cancelBubble、stopPropagation 和 return false，但链接仍然通过。我还尝试在 bindEvent() 的 addEventListener() 函数调用中将阶段从 冒泡 更改为 捕获 .

如何阻止此事件触发图像映射的默认操作？

Answer 1

好吧，经过更多的实验后，我似乎让它在所有浏览器上都能正常工作，没有 JS 错误(或者看起来是这样)。

我创建了一个停止默认处理程序的函数，并以事件作为参数调用它。这个函数看起来像这样:

function stopDefaultHandler(e) 
{ 
    if (e)
    {
      e.cancelBubble = true;
      e.returnValue = false;

      if (e.stopPropagation)
        e.stopPropagation;

      if (e.preventDefault) 
       e.preventDefault();
    }

    if (window.event && window.event.returnValue)
       window.eventReturnValue = false;
}

它似乎工作正常，但欢迎评论。