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)

IE 10: mouseleave is triggered (bad, bad)

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.

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)

IE 10: mouseleave is triggered (bad, bad)

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.

• javascript
• internet-explorer
• dom-events
• internet-explorer-10

4 Answers 4

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

I added a bit more javascript to find a solution, although it may not be ideal for general use.

The only strange behavior I can find is that on IE it doesn't consider the value to have changed when clicked until the select element has been blurred.

HTML

<div id="parent">
  <div>fdgfd</div>
  <div>content</div>
  <select name="" id="selectId">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
    <option value="">4</option>
    <option value="">5</option>
  </select>
</div>
<div id="result">out</div>

Javascript

var selected = false;
var toExit = false;

function blur() {
  selected = false;
  if (toExit) { 
    document.getElementById('result').innerHTML = 'out'
    toExit = false;
  }
}

document.getElementById('parent')
  .addEventListener('mouseleave', function() {
    // Store the exit so it can be used after blur
    toExit = true;
    if (!selected) {
      document.getElementById('result').innerHTML = 'out'
    }

});
document.getElementById('parent')
  .addEventListener('mouseenter', function() {
    toExit = false;
    return document.getElementById('result').innerHTML = 'in'
});

// Controls the selected state
document.getElementById('selectId')
  .addEventListener('blur', blur);

document.getElementById('selectId')
  .addEventListener('change', blur);

document.getElementById('selectId')
  .addEventListener('focus', function() {
    selected = true;
});

This might help, it seems to work the first time you open the dropdown.

document.getElementById('idforselect')
  .addEventListener('mouseout', function(e) {
  e.stopPropagation();
});

Unfortunately, it is not possible to enforce mouseleave event behaviour to be the same across browsers. It depends on the browser specific implementation.

It works valid according to the IE documentation.

mouseleave | onmouseleave event

Fires when the user moves the mouse pointer outside the boundaries of the object.

The same effect can be achieved using additional javascript code that will handle events triggered on the child objects.

Please check the example.

I've added some auxiliary variables and handlers for focus/blur events on <select> object.

var isSelectFocussed=false;
var inside = false;

function onMouseOut() {
   !isSelectFocussed && (document.getElementById('result').innerHTML = 'out');
}

document.getElementById('parent')
  .addEventListener('mouseleave', function() {
  onMouseOut();  
  inside = false;
})
document.getElementById('parent')
  .addEventListener('mouseover', function() {
  document.getElementById('result').innerHTML = 'in';
  inside = true;
});
document.querySelector('select')
 .addEventListener('focus', function() {
  isSelectFocussed = true;
});
document.querySelector('select')
 .addEventListener('blur', function() {
  isSelectFocussed = false;
  !inside && onMouseOut();
});

Anyway, it will be probably easier to use custom dropdown with hidden <input>.