调用dispatchEvent触发文本框click事件无法使其获得焦点

我太懂你遇到的这个痛点了——明明用dispatchEvent触发了文本框的click事件（控制台也能打出clicked），但文本框就是不肯获取焦点，而且你因为业务里那个跨iframe的特殊场景，只想靠模拟鼠标事件解决，不想直接调用focus()，对吧？

问题根源 #

其实这是因为手动构造并派发的鼠标事件，默认不会触发浏览器的原生默认行为。真实用户点击文本框时，浏览器会按这个流程走：mousedown → 给文本框赋予焦点 → mouseup → click。而你之前只触发了click这最后一步，跳过了前面关键的mousedown环节，自然就没触发聚焦的默认行为了。

解决方案：模拟完整的鼠标点击流程 #

要让文本框像真实被点击那样获取焦点，我们需要按顺序模拟mousedown、mouseup、click这三个事件，还原用户点击的完整路径。修改后的代码如下：

JavaScript代码

function handleClick(event) {
    let textbox = document.getElementById('text');
    let rect = textbox.getBoundingClientRect();            
    const eventOpts = {
        clientX: rect.x + 5,
        clientY: rect.y + 5,
        x: rect.x + 5,
        y: rect.y + 5,
        pageX: rect.x + 5,
        pageY: rect.y + 5,
        bubbles: true, // 保持事件冒泡特性，和原生行为一致
        cancelable: true
    };

    // 按顺序触发mousedown → mouseup → click
    textbox.dispatchEvent(new MouseEvent('mousedown', eventOpts));
    textbox.dispatchEvent(new MouseEvent('mouseup', eventOpts));
    textbox.dispatchEvent(new MouseEvent('click', eventOpts));
}

HTML代码

<input type="text" id="text" onclick="console.log('clicked')" /> 

<button onclick="handleClick(event)">Click</button>

为什么这样有效？ #

浏览器对原生的mousedown事件有内置的处理逻辑：当可聚焦元素（比如文本框）接收到mousedown事件时，会自动执行聚焦的默认行为。我们按顺序触发这三个事件，就完全模拟了真实用户点击的全过程，文本框自然就会获取焦点了。

针对你提到的跨iframe场景，只要保证事件的坐标、冒泡等参数设置正确（就像你之前做的那样），按这个流程派发事件，父页面的元素也应该能正确响应并获取焦点。

备注：内容来源于stack exchange，提问作者Rodion Degtyar