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

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

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

但无论如何你会更好地收到 onchange 的价值:)

此致

Answer 2

我不确定这是否可行。 Datalist 选项，虽然在主文档 DOM 树中仍然可见，但被克隆和 encapsulated as part of a Shadow DOM 树，并且无法从父文档访问。您实际上悬停在这些封装的 Shadow DOM 节点上（无论如何肯定在 Chrome 中），并且主 DOM 树中的原始节点不会被 mouseover 或 hover 事件，当您将鼠标悬停在阴影 DOM 节点上时。

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

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

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

Get current value from datalist onhover

javascript

jquery

html-datalist