如何在HTML属性的onclick事件中停止事件传播？

Question

我有一个带有onclick属性的html元素，我需要防止该事件冒泡。我尝试过以下方法：

<div onclick="event.stopPropagation();">

并且还有这个：

<div onclick="(function(event){event.stopPropagation();})();)">

但两者都不起作用。由于这个div是Razor部分视图的一部分，而脚本设置在ViewData字典中，我绝对需要在html onclick属性中执行此操作。如何在html onclick属性上调用event.stopPropagation()？

编辑：在这种情况下出现错误的原因是event为空。所以出于某种原因，我无法像这样访问事件。

- Magnus

---

我不熟悉Razor或ViewData字典，但您能否链接到一个函数来完成这个任务？ - David Thomas

可能是如何使用内联onclick属性停止事件传播？的重复问题。 - Liam

event.stopPropagation(); 应该可以正常工作。你尝试过不将其作为内联 onclick 事件吗？MDN 参考文档 - https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopPropagation - Renzo Gaspary

你的第二段代码有错误：有一个未匹配的右括号。另外，为什么要写成自执行函数？ - Jonathan Lam

Answer 1

使用 Event 的 event.stopPropagation 方法。你的第二个代码片段中存在错误，没有将 event 传递给匿名函数。修正后的代码：

<div onclick="(function(e) { e.preventDefault(); e.stopPropagation(); })(event)">

- Joseph

---

@LambdaNinja 已修复。 - Joseph

原来我没有通过这个事件！谢谢！ - Magnus

@Magnus：你说你的第一个例子也不起作用。如果那个不起作用，那么在它周围包装一个立即调用的函数也不会改变任何东西。这里包装函数是完全没有意义的。 - user1106925

@squint 这是真的 - 我实际上对匿名函数的工作方式和直接引用 event 的方式非常感兴趣。 - Joseph

Answer 2

onclick 内联函数的实现方式如下：

function(event) {
}

所以你可以直接使用 'event' 变量。

<div onclick='event.stopPropagation(); event.preventDefault()'>

没有必要实现内联函数。如果您添加event.preventDefault()，则您的第一个示例应该可以工作。

- pizzamonster