从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树中可见，但仍会被克隆并encapsulated作为Shadow DOM树的一部分，并且无法从父文档中访问。正是这些封装的Shadow DOM节点实际上已经悬停在（无论如何都在Chrome中），并且主DOM树中的原始节点不会被mouseover或hover事件触发当您将鼠标悬停在Shadow DOM节点上时。

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

请参阅另一个Stack Overflow问题中的this explanation，以获取有关您无法从父文档中侦听Shadow DOM上的事件的详细信息。

Answer 2

我认为你必须检查$("#browser")而不是$("#browsers")

但无论如何，你会更好地获得onchange上的价值：）

此致