前端 - ElementUI el-input组件suffix插槽点击事件focus不触发blur原因分析？

Question

elementui的el-input组件的源码中，suffix插槽绑定了一个点击事件@click="focus"，focus事件中没有做其他的处理，只是点击的时候获取input焦点，会触发focus事件。如果当前的input处于已经获取焦点的状态，应该会先触发input的blur事件，再触发focus事件。

但是为什么没有触发blur事件呢？

Answer 1

ElementUI 的 el-input 组件在处理 suffix 插槽的点击事件时，确实会触发 focus 事件以使 input 获取焦点。然而，你提到的 blur 事件没有触发的问题，可能涉及到浏览器的事件处理机制以及 ElementUI 的内部实现。

1. 事件冒泡与默认行为：在 DOM 中，点击事件会冒泡到父元素。如果 suffix 插槽的元素（通常是一个按钮或其他可点击元素）被点击，它的点击事件会首先触发，然后冒泡到 el-input 组件。ElementUI 的实现可能阻止了 blur 事件的默认行为或取消了事件的冒泡，从而避免了在触发 focus 事件之前先触发 blur 事件。
2. ElementUI 的内部实现：ElementUI 可能会对 el-input 组件进行了一些特殊处理，以优化用户体验或修复某些浏览器的不一致行为。这种内部实现可能包括在点击 suffix 插槽时直接设置 input 的焦点，而不是通过触发 focus 事件。这种情况下，blur 事件可能就不会被触发。
3. 浏览器的差异：不同的浏览器在处理焦点和模糊事件时可能有细微的差异。某些浏览器可能不会在点击已经聚焦的 input 元素内部的元素时触发 blur 事件。

要确切了解为什么 blur 事件没有触发，你可能需要查看 ElementUI 的相关源码或文档，以了解它是如何处理这些事件的。同时，也可以尝试在不同的浏览器和环境中测试你的代码，以观察是否存在一致的行为。