自定义styled-input组件blur事件监听失效，input正常的原因及解决

咱们先把问题的核心点拆解清楚：

• blur 是不冒泡的原生DOM事件：你的styled-input组件根元素是<div>，内部的<input>触发blur时，这个事件不会向上冒泡到外层的<div>，所以你绑定在根元素上的blur监听自然接收不到。
• input 是冒泡的原生DOM事件：内部<input>的input事件会顺着DOM树向上冒泡到<div>，所以指令里的input监听能正常捕获到。

这里给你三种可行的解决办法，你可以根据自己的场景灵活选择：

方案1：直接监听组件内部的<input>元素（最直接） #

在指令的bind钩子中，通过DOM查询找到组件内部的<input>，直接给它绑定blur事件：

Vue.directive('custom-validator', {
    bind: function(el, binding) {
        // 找到组件内部的input元素
        const inputEl = el.querySelector('input');
        if (inputEl) {
            // 定义监听函数，方便后续移除
            const handleBlur = (event) => {
                // 这里写你的校验逻辑
                console.log('blur事件触发，值为:', event.target.value);
            };
            inputEl.addEventListener('blur', handleBlur);
            // 把函数存起来，用于unbind时移除监听
            el._blurHandler = handleBlur;
        }

        el.addEventListener('input', (event) => {
            // 原有的input逻辑
        });
    },
    unbind: function(el) {
        // 记得移除监听，避免内存泄漏
        const inputEl = el.querySelector('input');
        if (inputEl && el._blurHandler) {
            inputEl.removeEventListener('blur', el._blurHandler);
            delete el._blurHandler;
        }
    }
});

优点：不需要修改组件代码，直接在指令里搞定；缺点：依赖组件的DOM结构，如果后续组件内部的input结构变化，指令可能失效。

方案2：监听组件的自定义blur事件（Vue风格） #

因为你的styled-input组件已经通过$emit('blur', ...)向外暴露了blur事件，所以可以在指令中直接监听组件的这个自定义事件，而不是原生DOM事件：

Vue.directive('custom-validator', {
    bind: function(el, binding, vnode) {
        // 获取子组件实例
        const inputComponent = vnode.componentInstance;
        if (inputComponent) {
            const handleBlur = (value) => {
                // 这里直接拿到组件emit出来的值
                console.log('组件blur事件触发，值为:', value);
            };
            inputComponent.$on('blur', handleBlur);
            // 存起来用于unbind
            el._componentBlurHandler = handleBlur;
        }

        el.addEventListener('input', (event) => {
            // 原有的input逻辑
        });
    },
    unbind: function(el, binding, vnode) {
        const inputComponent = vnode.componentInstance;
        if (inputComponent && el._componentBlurHandler) {
            inputComponent.$off('blur', el._componentBlurHandler);
            delete el._componentBlurHandler;
        }
    }
});

优点：不依赖DOM结构，完全基于Vue的组件事件系统，更符合组件化思想；缺点：需要确保组件确实向外emit了blur事件。

方案3：修改组件，让根元素转发blur事件（需要改组件代码） #

如果你有权限修改styled-input组件，可以让根元素成为可聚焦元素，并在内部input的blur事件中主动触发根元素的blur：

<template>
    <!-- 给根div设置tabindex="-1"，让它可以聚焦但不会被tab选中 -->
    <div tabindex="-1" ref="rootContainer">
        <input 
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
            v-on:blur="handleInputBlur"
        />
    </div>
</template>

<script>
export default {
    props: ['value'],
    methods: {
        handleInputBlur(event) {
            this.$emit('blur', event.target.value);
            // 主动触发根元素的blur事件
            this.$refs.rootContainer.blur();
        }
    }
}
</script>

这样你原来的指令代码不需要修改，就能监听到根元素的blur事件了。

优点：指令代码不需要改动；缺点：需要修改组件代码，并且给根元素添加了tabindex，可能带来一些额外的交互影响（比如聚焦时的outline，需要用CSS去掉）。

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