当锚标记

Question

我正在使用<a>创建一个反应中的卡组件 标记，div内<a>标记（带有一些填充）和checkbox内部 div。

要完成以下方案

• <a>标记内的div不应该是可点击的，因此添加了event.preventDefault()

• 该复选框应该是可点击的，因为它位于<a>标记内，所以onChange不会被触发，因为它的父（div）有 event.preventDefault()所以onClick会在onChange之前触发 所以我在event.stopPropagation复选框

中执行了onClick

此解决方案在Chrome中完美运行，但在遇到问题时却遇到了问题 运行firefox和IE

Firefox行为

• <a>代码按预期工作

• div也无法点击

• 复选框会触发onChange，但它会转到锚标记的href中给出的链接，但event.stopPropagation具有 已在onClick事件

中提供

IE行为（我在IE 11中尝试过）

• 该链接根本不起作用
• div按预期工作

执行检查元素时

• 在chrome div中按预期占据全宽
• 在IE和Firefox中，<a>标签覆盖了边界，div也占据了边界内的区域

以下是代码https://codesandbox.io/s/0mp8z1p15v

的链接

我知道在div中代替而不是<a>会修复所有内容，但我无法弄清楚为什么它在不同浏览器中的行为方式不同。即使在执行event.stopPropagation后，链接也会被触发。