将mousedown事件调度到元素不会让它成为焦点

时间:2016-02-19 19:56:02

标签: javascript dom javascript-events

我尝试使用代码来拦截mousedown事件,然后重新发送它以便在任何元素获得焦点时获得控制权。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">
document.addEventListener('mousedown', function (e) {
    console.log('mousedown', e);
    if (e.target.getAttribute('id') === 'target' && !e.__redispatched) {
        console.log('cancelling');
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        setTimeout(function () {
            var re = new MouseEvent('mousedown', {
                bubbles: true,
                cancelable: true,
                view: window,
                screenX: e.screenX,
                screenY: e.screenY,
                clientX: e.clientX,
                clientY: e.clientY,
                ctrlKey: e.ctrlKey,
                shiftKey: e.shiftKey,
                altKey: e.altKey,
                button: e.button,
                buttons: e.buttons,
                relatedTarget: e.relatedTarget,
                region: e.region
            }); 
            re.__redispatched = true;
            document.getElementById('target').dispatchEvent(re);
        }, 100);
    }

})
    </script>
    <input id="target" type="text"/>
</body>
</html>

控制台显示事件已正确重新分派,因为target元素捕获了该事件,但未获得该元素的重点。

当我在没有干预事件的情况下尝试这种情况时,会在处理mousedown事件之前获得焦点。

是否可以通过重新调度mousedown事件来处理此行为,还是必须手动处理focus? 或者我对这次活动做错了什么?

感谢。

1 个答案:

答案 0 :(得分:3)

收到focus事件后会触发mousedown。但是,浏览器不会运行untrusted events的默认处理程序,例如MouseEvent使用dispatchEvent解雇。

您必须手动focus输入。