使用onclick属性防止事件冒泡到锚点

Question

我正在构建一个包含可点击元素的小部件，并将其插入到<a>标记中。我使用了所有可能的方法来停止事件，但是，只要用户点击窗口小部件上的任何内容，就会触发锚点的点击处理程序（包括本机，href和onclick）。

两个例子的MCVE：

（span在这里描绘小部件）

<a onclick="alert('fail evt')">
    event
    <span onclick="evt.preventDefault(); evt.stopPropagation(); evt.stopImmediatePropagation(); return false">
        potato
    </span>
</a>

<a href="javascript:alert('fail native');">
    native
    <span onclick="evt.preventDefault(); evt.stopPropagation(); evt.stopImmediatePropagation(); return false">
        potato
    </span>
</a>

出于实施原因，无法使用addEventListener。不幸的是，小部件必须内联定义其处理程序。

是的，我知道您不应该在<a>代码中包含可点击的元素。

Answer 1

您需要致电preventDefault，而您需要在event对象而不是undefined evt对象上进行此操作。

＆＃13;

＆＃13;

<a href="javascript:alert('fail native');">
    native
           <span onclick="console.log('preventing prop'); event.preventDefault();">
        potato
    </span>
</a>

＆＃13;

＆＃13;

＆＃13;