click与blur的冲突

最新推荐文章于 2024-07-26 09:19:11 发布

原创最新推荐文章于 2024-07-26 09:19:11 发布 · 845 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了在Web开发中，如何通过使用e.preventDefault()确保click事件优先于blur事件执行，避免事件处理顺序混乱，提供了具体的jQuery代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：输入框失去焦点要执行指定动作，输入框外面有提交按钮。
问题：当需要去点击输入框外面的按钮时，先执行了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事件

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