带有伪类的 document.querySelectorAll :hover 在 FF 或 IE 中不起作用

Question

我想获取光标下的元素。当我使用document.querySelectorAll(":hover"); 时，它在 Chrome 中运行良好，但在 Firefox 或 IE 中无法运行。

这可能是因为我在 Google 地图的 eventListener 中使用了它。这里是我如何使用它。

google.maps.event.addListener(polygon,"mouseout",function(){
  elementHover = document.querySelectorAll( ":hover" );
  alert(elementHover[elementHover.length-1].id);
});

在 Chrome 中，它为我提供了我用光标悬停的元素的 ID，但在 IE 或 FF 中我什么也得不到。

Answer 1

您使用 mouseout 而不是 mouseover 有什么原因吗？看起来，取决于浏览器如何解决它（它是在您离开之前触发事件，还是在您离开之后触发事件，正在侦听事件的对象？），这可能会引起一些恐慌。您是否有理由不只是传递 Event 对象来获取您要离开的对象，而不是希望选择器会触发？

根据 Google 的文档 (https://developers.google.com/maps/documentation/javascript/events#EventArguments)，您可以将事件对象传递给函数：

google.maps.event.addListener(polygon,"mouseout",function(evt){
  // get the target from the mouseout event, something like this:
  elementHover = evt.target;
  alert(elementHover[elementHover.length-1].id);
});

目前我无法对此进行测试，因此您可能不得不摆弄它并阅读 Google 的文档，以确保您正在查看的事件为您提供了对它来自的对象的引用（您甚至可以使用“this”而不是 evt.target，具体取决于传递到上下文中的内容）。但是， :hover 仍然是一个半飞行的野兽，并且根据解决事件的顺序，您很可能只在 Chrome 中看到它，因为它触发事件的方式与 FF 和 IE 不同。

祝你好运！