焦点事件在所有浏览器上都可以正常工作,但单击 Safari 时则除外。
它在 div[tabindex] 元素上工作正常,但在按钮或 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>
为什么点击时没有触发焦点事件?
我们通过研究发现,Mac 上的 Safari 和 FireFox 在单击按钮时不会将焦点设置在按钮上。
我们解决这个问题的方法是向我们的按钮添加一个点击监听器,并对被点击的按钮调用 focus() 。
在 Angular 中它看起来像这样:
<button (click)="myClickFunction(); $event.target.focus();>My Button</button>
参见 https://bugs.webkit.org/show_bug.cgi?id=13724
这在 MacOS 上按预期工作。单击按钮、单选按钮或复选框不会为元素提供焦点 - 因此它不会失去焦点并触发模糊。
解决方案是给它一个点击事件,使元素获得焦点。
使用下面的代码修复网页上的所有按钮:
(function() {
var buttons = document.querySelectorAll("button");
for (var i=0; i<=buttons.length-1; i++) {
(function(index) {
var button = buttons[index];
button.addEventListener("click", function() { button.focus(); });
})(i);
}
})();
Angular 8+ 解决方案:
经验:
<button #toggleButton type="button"
(click)="onClick(); $event.stopPropagation()"></button>
***
@ViewChild('toggleButton', { static: true }) toggleButton: ElementRef;
onclick(){
this.toggleButton.nativeElement.focus();
}
这可能会解决问题:https://stackoverflow.com/a/1269767/2731261
$(".btn").mouseup(function(e){
e.preventDefault();
});
有一些 Safari 设置默认情况下未启用: • 转至 Safari > 首选项。