时间戳

首页 > 解决方案 > 防止 NavLink 中另一个元素的 NavLink 行为

javascript - 防止 NavLink 中另一个元素的 NavLink 行为

问题描述

我什至不确定这是否是一个好问题。如果我没有任何意义，请道歉。

我对 NavLink 有以下结构：

<NavLink to="/path">
<div onClick={()=>{...function}} ></div>
</NavLink>

如果用户单击 NavLink 内的 div，如何防止 div 将用户定向到路径？我使用了 e.preventDefault() 并且它有效但不完全。div 也有输入，onChange 会触发 NavLink 行为吗？

谢谢

标签： javascriptreactjsreact-router

解决方案

通过调用点击处理程序event.stopPropagation()，div事件不会冒泡到链接。

使用原生 JavaScript 的 Demo 也适用于 React：

const [a, div] = ['a', 'div'].map(document.getElementById.bind(document));

div.addEventListener('click', e => e.stopPropagation());

a.addEventListener('click', () => console.log('doh')); // never happens
#div {
  background-color: red;
  width: 100px;
  height: 100px;
}
<a id="a">
  <div id="div"></div>
</a>

推荐阅读