Porting Mouseenter / Mouseleave Functions

Mouseenter and Mouseleave functions in IE is one of the main reasons why developers would sometimes have to tweak their applications specifically for IE. Not only is IE the most popular browser, the specific mouse-related commands are very easy to configure that it will effectively let the developers build an interactive application in no time.

Of course, they would have to add additional functions, but an application that uses the ability of a mouse in an application would have to consider IE as it main browser. This function alone could be found in IE and other browsers would have to use a counterpart which is mouseover and mouseout.

But a distinct difference in execution exists between mouseenter/mouseleave and mouseover/mouseout. The former would execute the function as it is while the latter would bubble the function.

For example, a dropdown list will execute when the mouseenter is used and when the mouse hovers over the list with additional options, it will not automatically execute the additional list.

On the other hand, mouseover/mouseout automatically executes the dropdown list and its additional lists as soon as the mouse hovers over the function that has another list. In non-IE browsers, the mouseover/mouseout function is a little bit annoying and could drag down the application especially when the user is trying to access the application from a low powered gadget and/or a slow internet connection.

Of course there is a way of porting this convenience to non-IE browsers. Some would think that all they need to do is to stop the even propagation in IE so that its function will be limited to the specific dropdown list and will not behave like the mouseover/mouseout in non-IE browsers. But it's way more than that and could be a little bit tricky.

Stopping event propagation is possible in mouseenter/mouseleave but that would cause serious problems or it might not have any affect at all. This IE specific function doesn't have the ability to recognize limitation in the browser. That means stopping the event before it completes will only yield two results: the function will never execute or the function will execute like mouseover/mouseout.

What developers have to do then is to create another function that will stop the function from execution after it will try to load the function. The first approach in doing this is to add the function addeventlisterner in each element. This will have to be implemented in each element and would have to be linked to the mouseenter/mouseleave functionality. Obviously, this approach is very tedious since you have to deal with the element one by one just to prevent it from bubbling.

A different approach is fortunately, possible. Developers could add addevent function so that the mouseenter/mouseleave function would be executed without bubbling.

Developers would practically have to add an element so that the function would execute according to plan. Addevent function is also cross-browser which means it doesn't have any problem when it is executed in other browsers.