Question

使用这样的布局：

<button><span>foo</span></button>

跨度上的

onmouseenter永远不会在firefox中触发。它确实用铬。对于其他包装元素，它会触发。例如，

<label><span>foo</span></label>

将在firefox中调用onmouseenter的span。它只有firefox，只有按钮，我有这个问题。按钮不在我的控制范围内，因此我无法在其上放置处理程序，或更改元素的类型。我只能改变孩子们。

jsfiddle，显示问题：https://jsfiddle.net/gjwp04uk/3/

Answer 1

如果，当你说你不能改变按钮时，那是因为你没有直接访问它，就像在你身上一样，你不能把ID放在上面，你可以仍然通过孩子们添加处理程序。将您的HTML更改为：

<!-- Inline style used for simplicity, you should probably put it in a CSS file -->
<button><span id=span style="pointer-events: none">point here: </span></button>

<span id=result></span>

和你的JS：

var span = document.getElementById('span');
var res = document.getElementById('result');
var mouseOverCallback = function () {
    res.innerHTML = 'enter';
}

var mouseOutCallback = function () {
    res.innerHTML = 'leave';
}

span.parentNode.addEventListener("mouseover", mouseOverCallback);
span.parentNode.addEventListener("mouseout", mouseOutCallback);

这似乎可以很好地实现您在Firefox中所需的功能。但是，如果您的意思是不允许因任何原因更改按钮，那么这可能不适用。

另外，请注意：

事件分别从mouseenter和mouseleave更改为mouseover和mouseout，因为根据this和this，前两个为层次结构中的每个元素触发，而最后两个元素只触发一次
样式pointer-events: none已添加到范围内，因此它不会自行处理鼠标事件（当我在没有这种样式的Chrome上测试时，在跨度上移动会在按钮上触发mouseout那么另一个mouseover，这可能是不可取的）

onmouseenter不适用于firefox中按钮的孩子

1 个答案: