从datalist onhover获取当前值

Question

我正在尝试获取数据主义者的悬停元素的当前值.因此,如果我打开带有值的datalist并将鼠标移到它们上面,我希望这些值出现在控制台中.

这是我的尝试:

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

这是一个小提琴:https://jsfiddle.net/sshcvr5q/

Answer 1

我不确定这是否可行。Datalist 选项虽然在主文档 DOM 树中仍然可见，但会被克隆并封装为Shadow DOM树的一部分，并且无法从父文档访问。您实际上将鼠标悬停在这些封装的 Shadow DOM 节点上（当然在 Chrome 中），并且当您将鼠标悬停在 Shadow DOM 节点上时，主 DOM 树中的原始节点不会被 或mouseover事件触发。hover

如果您使用 Chrome DevTools 检查 JSFiddle 示例中的 DOM 树，您可以看到封装的 DOM 树的 Shadow Root：

有关为什么无法从父文档侦听 Shadow DOM 上的事件的更多信息，请参阅另一个 Stack Overflow 问题中的解释。