I'm listening to 'mouseleave' events on the <html> element to trigger a popup when the user tries to close the tab (I'm using a library called ouibounce for this purpose, not that it really matters). The problem is, <select> dropdowns trigger this event when you expand them to see its <option>s. T
To my surprise, it seems like this is what IE 9 and 10 do. I cannot reproduce the same behavior in older versions. I stripped everything down to this:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$('html').on('mouseleave', function(e) {
console.log(e);
});
</script>
</head>
<body>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</body>
</html>
And as I suspected:
I tried to capture the event so I can stop propagation, but that didn't work because this is a pure mouseleave on <html>.
Anyone out there who have dealt with this before? Any help is appreciated.
Cheers.