Question

这是我的jsx的结构。

<a href="/some/link/" title="some time">
  <div>
    Some big Enough Content
  </div>
  <button className="card-detail__link right-price__link" onClick={this.handleCheckRightPriceClick}>
     Check Right Price
  </button>
</a>

a标记环绕div标记，该标记具有足够的内容以占用相当大的空间，而button标记则附加了一些onClick事件侦听器。理想的行为是，在div标签内的任何位置单击时，应打开a标签中的链接，但如果单击按钮，则仅应调用其单击处理程序，并且不应打开该链接。

为实现此行为，我在按钮的单击处理程序内调用了event.stopPropagation（），但该链接仍处于打开状态。然后我取消了对stopPropagation的调用，并调用了preventDefault，这使我大吃一惊。

现在根据此documentation，按钮的默认类型为submit，如果按钮form中包含按钮，它将把数据提交给服务器。但是在我的jsx中，没有表单标签。

处理程序实施：

handleCheckRightPriceClick = event => {
  // Even if I remove the call to stopPropagation, it doesn't effect the output
  event.stopPropagation();
  // IF I remove call to preventDefault, the link is opened.
  event.preventDefault();
  // does some stuff
};

我的想法是，应该调用stopPropagation而不是preventDefault，因为它应该停止事件冒泡并且事件永远不会到达锚标记

event.stopPropagation和event.preventDefault在React应用中无法正常运行

0 个答案: