React的onMouseDown，onBlur和onClick执行顺序问题

前言

本篇文章提供了一种解决按钮点击事件冲突的解决办法，希望能与大家分享沟通。

冲突描述

当输入框有onblur事件的时候，在onblur的同时，点击提交按钮，会同时触发按钮的onclick事件和输入框的onblur事件。为了避免这种同时触发的情况，可以给button按钮添加以下代码：

onmousedown={e => {
  e.preventDefault();
}}

原理是事件触发顺序的不同 onmousedown => onblur=> onclick。

错误场景：

onblur事件会对表单的输入框进行验证，若验证不通过，会在输入框下方显示错误信息。这时，在表单底部的提交按钮会产生向下的位移。

随后改正输入框信息，使之能通过验证，这时点击表单提交按钮，会同时触发onblur和onclick事件。因为验证通过，输入框下方的错误信息消失，会使表单提交按钮向上位移，这时如果点击提交按钮之前的位置，会无法触发点击事件。

具体情形如下图所示：

1. 初始状态

   
   
   image.png

2. 输入错误信息并触发输入框的onblur事件，表单提交按钮发生向下位移，位移高度为错误信息文字高度。
   

   image.png

3. 随后输入正确信息，点击提交按钮，先触发了onblur事件，错误信息消失，提交按钮向上位移，若鼠标点击在按钮位移之前的位置，会无法触发按钮的onclick事件。
   

   image.png

4. 解决方案：
   给button按钮添加以下代码：

onmousedown={e => {
  e.preventDefault();
}}

原理是事件触发顺序的不同 onmousedown => onblur=> onclick。

例外：但是如果按钮是一个封装的组件，如react-route的Link组件，这时候使用onmousedown并不会解决问题，原因是Link组件本身并没有onclick事件。