Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use relatedTarget (or equivalent) in IE?

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/

like image 800
Daniel Avatar asked Dec 23 '16 09:12

Daniel


People also ask

Why is relatedTarget null?

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.

What is event relatedTarget?

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.


2 Answers

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/

like image 129
christiansabor Avatar answered Sep 29 '22 23:09

christiansabor


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.

like image 44
Shilly Avatar answered Sep 29 '22 23:09

Shilly