click与blur的冲突

背景：输入框失去焦点要执行指定动作，输入框外面有提交按钮。
问题：当需要去点击输入框外面的按钮时，先执行了blur事件再执行click事件，但同时，blur事件比click事件结束得慢。那么问题来了，怎么严格限定click事件比blur事件先执行呢？
解决方案核心： e.preventDefault()—该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）
事件执行顺序：mousedown事件>blur事件>click事件
代码：

  <script>
     /*输入框失去焦点的blur事件*/
     $('.input').on("blur",function () {
              console.log('inputBlur');
              
            });
         /*阻止浏览器默认事件*/
         $(".submit").on("mousedown",function(e) {
                e.preventDefault();
            })
      $('.submit').on('click',function(){
         console.log('submitClick');
         
      })
  </script>

输出：
click与blur的冲突
输出了click事件，阻止了blur事件

preventDefault与stopPropagation区别：
stopPropagation：用于防止事件击穿，例如：点击外层的li同时触发了底层的ul
preventDefault：用于阻止绑定于当前动作的事件。例如：在mousedown中使用preventDefault还是会触发mouseup,click事件但却会阻止blur事件。