Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mouse Enter/Leave Polyfill for Chrome/Firefox

Is there a polyfill for the IE events mouseenter/mouseleave (or a conversion of the jQuery events) so it can be bound to raw JS events?

I.E. I is there a cross browser way to do this:

node.addEventListener('mouseenter', function() {
    ...
});

node.addEventListener('mouseleave', function() {
    ...
});

I know it should be possible custom events using:

var event = new Event('mouseenter');
node.addEventListener('mouseenter', function (e) { ... });
node.dispatchEvent(event);
etc
like image 811
Petah Avatar asked Dec 11 '25 05:12

Petah


1 Answers

Ok, seems I figured out how to do it:

http://jsfiddle.net/HXwJH/5/

node.addEventListener('mouseover', function() {    
    if (!event.relatedTarget || (event.relatedTarget !== this && !(this.compareDocumentPosition(event.relatedTarget) & Node.DOCUMENT_POSITION_CONTAINED_BY))) {
        this.dispatchEvent(new Event('mouseenter'));
    }
});

node.addEventListener('mouseout', function() {    
    if (!event.relatedTarget || (event.relatedTarget !== this && !(this.compareDocumentPosition(event.relatedTarget) & Node.DOCUMENT_POSITION_CONTAINED_BY))) {
        this.dispatchEvent(new Event('mouseleave'));
    }
});
like image 122
Petah Avatar answered Dec 13 '25 18:12

Petah



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!