Apparently IE (11) has an issue with relatedTarget
, for example on blur
events. Is there an alternative for IE to get the relatedTarget
?
Here is an example that produces an error in IE: https://jsfiddle.net/rnyqy78m/
Note that many elements can't have focus, which is a common reason for relatedTarget to be null . relatedTarget may also be set to null for security reasons, like when tabbing in or out of a page.
The relatedTarget property returns the element related to the element that triggered the mouse event. The relatedTargert property can be used with the mouseover event to indicate the element the cursor just exited, or with the mouseout event to indicate the element the cursor just entered.
It looks like IE11 sets document.activeElement to the next focused element before the blur event is called. So to handle blur correctly in all browsers including IE11 you could use something like
var target = evt.relatedTarget;
if (target === null) { target = document.activeElement; }
I adapted your fiddle to use this: https://jsfiddle.net/hukt0rhj/
If I look at this list: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget blur isn't included as having a standard secondary target. So I assume the secondary target on blur in chrome is non-standard.
If you replace blur by focusin or focusout, it also works for IE11 for me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With