Safari：焦点事件不适用于按钮元素

Question

焦点事件在所有浏览器上都能正常工作，但在点击时可以使用Safari。

它在div [tabindex]元素上工作正常，但不能处理按钮或输入：按钮元素。

当我使用$（＆＃39; .btn＆＃39;）时，它也可以获得焦点事件.focus（）。

为什么焦点事件无法在点击时触发？

这是我的代码：

＆＃13;

＆＃13;

$(".btn").focus(function (e) {
	$(".result").append("<p>Event:"+e.type+", target:"+e.target+"</p>");
})

＆＃13;

.result{min-height:200px;border:1px solid #000;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn">button 1</button>
<input type="button" class="btn" value="button 2"/>
<div class="btn" tabindex="0">div element</div>
<h1>
Result:
</h1>
<div class="result">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不支持文档说明：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus

Answer 2

  

为什么没有在单击时触发焦点事件？

我们通过研究发现，Mac上的Safari和FireFox在单击按钮时不会将焦点放在按钮上。

我们解决的方法是在按钮上添加一个点击侦听器，并在被单击的按钮上调用focus（）。

在Angular中，它看起来像这样：

<button (click)="myClickFunction(); $event.target.focus();>My Button</button>

Answer 3

这可能会解决问题：https://stackoverflow.com/a/1269767/2731261

$(".btn").mouseup(function(e){
    e.preventDefault();
});

Answer 4

请参见https://bugs.webkit.org/show_bug.cgi?id=13724

这在MacOS上可以正常使用。单击按钮，单选按钮或复选框不会使元素具有焦点，因此不会失去焦点并触发模糊。

解决方案是给它一个click事件，以使元素成为焦点。

Answer 5

Angular 8+解决方案：

1. 在您的按钮标签中 添加#toggleButton和（click）=“ onClick（）; $ event.stopPropagation（）”

exp：

<button #toggleButton type="button"
    (click)="onClick(); $event.stopPropagation()"></button>

1. 在您的component.ts中添加 ==>在构造函数之前

*** @ViewChild('toggleButton', { static: true }) toggleButton: ElementRef;

---

onclick(){
        this.toggleButton.nativeElement.focus();
}