Javascript：为元素设置适当的事件处理程序

我有一个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>

问题是，此代码还阻止锚定标记的

单击事件。单击div会执行我的事件处理程序，这是需要的，但它也会停止锚标记以执行它的正常行为（跳到div
goToNextDiv
）

现在我尝试注释掉
event.stopPropagation（）
行，它再次启用事件传播并允许锚点相应地行为，但随后它还执行
MyDiv
的上一个单击事件处理程序

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

未调用div的上一个事件处理程序
我的div事件处理程序执行
锚定标记也可以工作（内部可能有许多锚定标记）
分区，在任何地方）
您可以检查单击目标是否为锚定，而不阻止默认操作

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);

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);