1

我有一个 DOM 结构，如下所示 -

<div id='MyDiv'>
    <span>Hello MyDiv</span>
    <p class='MyClass'>
        <img src='image.png' alt='myImage' width='300px' height='300px' />
        <a href='#goToNextDiv'>Go to next</a>
    </p>
</div>

现在MyDiv有一个带有原型库的 click 事件处理程序，我无法访问其源代码。我想从 div 中删除这个处理程序并插入另一个。我为此尝试了以下代码-

var content = document.getElementById('MyDiv');
content.addEventListener('click', function(event){
    event.preventDefault();
    event.stopPropagation();

    alert('This is my handler');    

    return false;
}, true);

问题是，这段代码还阻止click了锚标记的事件。单击 div 会导致我的事件处理程序执行，这是所需的，但它也会停止锚标记以执行它的正常行为（即跳转到 div goToNextDiv）。

现在我尝试注释掉该event.stopPropagation()行，这再次启用事件传播并允许锚点相应地运行，但随后它也执行MyDiv.

如何从 div 中删除以前的处理程序并附加我的新处理程序，以便 -

  1. 没有调用 div 的前一个事件处理程序
  2. 我的 div 事件处理程序执行
  3. 锚标签也有效（在任何地方，div 内可能有很多锚标签）
4

1 回答 1

2

您可以检查点击目标是否是锚点，而不是阻止默认操作。

var content = document.getElementById('MyDiv');
content.addEventListener('click', function(event){
    if (event.target.tagName != 'A'){//or some other way to tell if it is a link
        event.preventDefault();
        event.stopPropagation();

        alert('This is my handler');    

        return false;
    }
}, true);
于 2012-08-02T05:14:17.593 回答