从datalist onhover获取当前值

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

这是我的尝试：

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

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

Answer 1

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

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

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

Answer 2

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

但无论如何你会在onchange上获得更好的价值:)

问候