Javascript 为什么综合触发点击不会聚焦元素？

综合触发单击不会导致焦点切换到元素，但硬件触发的单击会导致焦点切换到元素

我试图模拟对一个元素（比如带有tabindex的div）的合成点击，该元素在焦点上有一个回调绑定。我不想显式地调用元素上的焦点，因为元素可以通过单击或键盘选项卡获得焦点

我的

代码：

$('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>

div{
    height:100px;
    width:100px;
    border:10px solid black;
}

#target:focus{
    background-color:#aaa;
}
.selected{
    border-color:red;
}

HTML：

$('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>

div{
    height:100px;
    width:100px;
    border:10px solid black;
}

#target:focus{
    background-color:#aaa;
}
.selected{
    border-color:red;
}

---

没有所谓的硬件点击

焦点发生在鼠标按下时

---

如果在同一个元素上释放鼠标，那么您也会得到一个单击事件。

触发器只是重新执行设计好的处理程序。