为什么触发点击合成不聚焦元素

Why triggering a click synthetically does not focus the element?

本文关键字:聚焦 元素 为什么      更新时间:2023-09-26

合成触发点击不会导致焦点切换到元素上,但是由硬件触发的点击会。

我试图模拟一个合成点击一个元素(说div与tabindex),它有一个回调绑定的焦点。我不想在元素上显式地调用focus,因为元素可以通过单击或键盘选项卡获得焦点。

我JSFiddle

:

$('button.trigger').click(function(){
    $('div#target').trigger('click');
});
$('button.trigger1').click(function(){
    var event = new MouseEvent('click');
    var target = document.getElementById('target'); 
    target.dispatchEvent(event);
});
$('div#target').click(function(){
    $(this).addClass('selected');
});

:

<div id="target" tabindex="-1"></div>
<button class="trigger">Click to trigger click</button>
<button class="trigger1">Click to dispatch click</button>
CSS

:

div{
    height:100px;
    width:100px;
    border:10px solid black;
}
#target:focus{
    background-color:#aaa;
}
.selected{
    border-color:red;
}

没有硬件点击这回事。

焦点发生在鼠标向下。

如果鼠标在同一元素上被释放,那么你也会得到一个点击事件。