Safari：焦点事件对按钮元素不起作用

Question

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

它适用于 div[tabindex] 元素，但不适用于 button 或 input:button 元素。

当我使用 $('.btn').focus() 时，它也可以获得焦点事件。

为什么单击时未触发焦点事件？

这是我的代码：

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

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

 <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>

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://bugs.webkit.org/show_bug.cgi?id=13724

这在 MacOS 上按预期工作。 单击按钮、单选按钮或复选框不会使元素获得焦点 - 因此它不会失去焦点并触发模糊。

解决方案是给它一个单击事件，使元素获得焦点。

Answer 4

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

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

Answer 5

Angular 8+ 解决方案：

1. 在您的按钮标签中添加 #toggleButton 和 (click)="onClick(); $event.stopPropagation()"

经验：

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

2. 在你的 component.ts 添加 ==>before 构造函数

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

---

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