javascript - 悬停时从数据列表中获取当前值

Question

我正在尝试获取数据列表悬停元素的当前值。因此，如果我打开其中包含值的数据列表并将鼠标移到它们上面，我希望这些值出现在控制台中。

这是我的尝试:

<input list="browsers" id="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

$("#browsers").on("mouseover", function() {
  console.log($(this).value());
});

这是一个 fiddle :https://jsfiddle.net/sshcvr5q/

Answer 1

我不确定这是否可行。数据列表选项，虽然在主文档 DOM 树中仍然可见，但被克隆和 encapsulated作为 Shadow DOM 的一部分树，并且无法从父文档访问。您实际上悬停在这些封装的 Shadow DOM 节点上(无论如何肯定是在 Chrome 中)，并且主 DOM 树中的原始节点不会被 mouseover 或 hover< 触发 将鼠标悬停在 Shadow DOM 节点上时的事件。

如果您使用 Chrome DevTools 检查 JSFiddle 示例中的 DOM 树，您可以看到封装的 DOM 树的影子根:

参见 this explanation来自另一个 Stack Overflow 问题，了解有关为什么您不能从父文档中监听 Shadow DOM 上的事件的更多信息。