Search code examples
javascriptjquerysafari

Safari: focus event doesn't work on button element

The focus event works fine on all browsers but Safari when it has been clicked.

And it works fine on div[tabindex] element, but don't work on button or input:button element.

It also can get the focus event when I use $('.btn').focus().

Why does the focus event haven't triggered on click ?

Here is my code:

$(".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>

Solution

  • This might fix the issue: https://stackoverflow.com/a/1269767/2731261

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