Javascript 鼠标移动到带有select的容器上-Internet Explorer 10

我已将一个

mouseleave

和一个

mouseenter

事件附加到一个容器。这个容器包含一个select和一些随机文本，我将鼠标放在容器上，然后单击select，下面是Chrome vs IE 10上的情况：

铬合金： mouseleave没有被触发（这就是我想要的）

IE 10： 鼠标移动被触发（坏，坏）

---

我正在寻找一种只在鼠标未悬停在容器及其子容器上时才会触发事件的跨浏览器解决方案。

我惊讶地发现，理想的跨浏览器解决方案不可能使用

标记，因为浏览器及其版本在选项的呈现上有所不同。其中一些使用自己的非目标GUI和其他HTML元素。在这种情况下，您最好使用带有隐藏输入的自定义下拉菜单

---

顺便说一句，在这种情况下，与mouseover/mouseout相比，mouseenter/mouseleave具有更好的性能并防止冒泡。这可能会有所帮助，它似乎在您第一次打开下拉列表时就起作用了

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

---

我添加了更多的javascript以找到解决方案，尽管它可能不适合一般使用

<> P>唯一的奇怪行为是，在选择元素已经被模糊之前，当它被点击时，它不会考虑改变值。 HTML

---

不幸的是，不可能在浏览器之间强制执行相同的

mouseleave

事件行为。它取决于特定于浏览器的实现

它的有效性取决于

mouseleave | onmouseleave事件

当用户将鼠标指针移动到的边界之外时激发 物体

使用额外的javascript代码来处理在子对象上触发的事件，也可以达到同样的效果

请检查一下电话号码

我为

对象上的聚焦/模糊事件添加了一些辅助变量和处理程序

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();
});

---

无论如何，使用自定义下拉菜单隐藏

可能会更容易。是的，可能是时候使用一些针对css的浏览器了，或者使用可怕的

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;
});

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();
});