NextJS中Link组件内嵌Button：仅执行点击事件阻止跳转的方法

当你在Link里嵌套Button时，点击按钮会先执行onClick逻辑，再触发Link的页面跳转——这是事件冒泡导致Link捕获到了点击事件。以下几种方法可以实现只执行Button的onClick逻辑，同时阻止页面跳转：

方法一：阻止事件冒泡 #

在Button的onClick回调中调用event.stopPropagation()，阻止事件向上传递到Link组件，这样Link就不会触发跳转行为。

修改你的代码如下：

<Link href={`./${school.attributes.Slug}/obor/${field.attributes.Code}`}>
  <div className="responsive-table__row">
    <div className="responsive-table__item">50</div>
    <div className="responsive-table__item">40/50</div>
    <div className="responsive-table__item">Test</div>
    <div className="responsive-table__item">
      <button 
        className="responsive-table__button button button--secondary" 
        onClick={(e) => {
          e.stopPropagation(); // 阻止事件冒泡
          handleModalOpenerClick(field);
        }}
      >
        Show modal
      </button>
    </div>
  </div>
</Link>

方法二：拆分Link的作用范围 #

如果只需要表格行的部分区域触发跳转，可以把Link仅包裹需要跳转的内容，Button所在区域单独拆分出来，从根源上避免事件冲突，同时结构更符合语义化：

<div className="responsive-table__row">
  <Link href={`./${school.attributes.Slug}/obor/${field.attributes.Code}`}>
    <div className="responsive-table__item">50</div>
    <div className="responsive-table__item">40/50</div>
    <div className="responsive-table__item">Test</div>
  </Link>
  <div className="responsive-table__item">
    <button 
      className="responsive-table__button button button--secondary" 
      onClick={() => handleModalOpenerClick(field)}
    >
      Show modal
    </button>
  </div>
</div>

方法三：在Link中判断点击目标（不推荐） #

也可以在Link的onClick回调中判断点击目标是否为Button，若是则阻止默认跳转行为，但这种方式不如前两种简洁直观：

<Link 
  href={`./${school.attributes.Slug}/obor/${field.attributes.Code}`}
  onClick={(e) => {
    if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
      e.preventDefault();
    }
  }}
>
  <div className="responsive-table__row">
    <div className="responsive-table__item">50</div>
    <div className="responsive-table__item">40/50</div>
    <div className="responsive-table__item">Test</div>
    <div className="responsive-table__item">
      <button 
        className="responsive-table__button button button--secondary" 
        onClick={() => handleModalOpenerClick(field)}
      >
        Show modal
      </button>
    </div>
  </div>
</Link>

推荐优先使用前两种方法，尤其是方法二，后续维护时更不容易出现额外的事件问题。

内容的提问来源于stack exchange，提问作者Stikoun