Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mouseleave on a container with a select - Internet Explorer 10

I've attached a mouseleave and a mouseenter event to a container. This container contains a select and some random text, I pass my mouse over the container and then click on the select, here's what happens on Chrome vs IE 10:

Chrome: mouseleave is not triggered (that's what I want) enter image description here

IE 10: mouseleave is triggered (bad, bad) enter image description here

A demo can be found here

I'm looking for a cross browsing solution that would trigger an event only when my mouse is not hovering the container and its children.

like image 526
Jonathan de M. Avatar asked Sep 06 '17 10:09

Jonathan de M.


People also ask

What is the difference between Mouseout and Mouseleave?

This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).

How to use mouseleave event in jQuery?

jQuery mouseleave() When your mouse cursor leaves the selected element, it triggers the mouseleave event and once the mouseleave event is occurred, it executes the mouseleave() method attached with the event handler function to run. This event is generally used together with mouseenter() event. Syntax: $(selector).

What is Mouseleave?

The mouseleave event occurs when the mouse pointer leaves the selected element. The mouseleave() method triggers the mouseleave event, or attaches a function to run when a mouseleave event occurs. Note: Unlike the mouseout event, the mouseleave event only triggers when the mouse pointer leaves the selected elements.

How do you check if the mouse is over an element?

You can simply use the CSS :hover pseudo-class selector in combination with the jQuery mousemove() to check whether the mouse is over an element or not in jQuery. The jQuery code in the following example will display a hint message on the web page when you place or remove the mouse pointer over the DIV element's box.


1 Answers

I am affraid that ideal cross browser solution is not possible with <select> tag because browsers and their versions differ at option's rendering. Some of them use own untargetable GUI and other HTML elements. The best you can do in this case is custom dropdown menu with hidden input.

BTW. in this case, mouseenter/mouseleave has better behaviour and prevents bubbling compared to mouseover/mouseout

like image 89
bigless Avatar answered Oct 19 '22 14:10

bigless