我正在尝试获取数据列表悬停元素的当前值。因此，如果我打开其中包含值的数据列表并将鼠标移到它们上面，我希望这些值出现在控制台中。
这是我的尝试:
<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/
最佳答案
我不确定这是否可行。数据列表选项，虽然在主文档 DOM 树中仍然可见，但被克隆和 encapsulated作为 Shadow DOM 的一部分树，并且无法从父文档访问。您实际上悬停在这些封装的 Shadow DOM 节点上(无论如何肯定是在 Chrome 中)，并且主 DOM 树中的原始节点不会被 mouseover 或 hover< 触发 将鼠标悬停在 Shadow DOM 节点上时的事件。
如果您使用 Chrome DevTools 检查 JSFiddle 示例中的 DOM 树，您可以看到封装的 DOM 树的影子根:
参见 this explanation来自另一个 Stack Overflow 问题，了解有关为什么您不能从父文档中监听 Shadow DOM 上的事件的更多信息。
关于javascript - 悬停时从数据列表中获取当前值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35894243/