从datalist onhover获取当前值

时间:2016-03-09 14:24:06

标签: javascript jquery html-datalist

我试图获取数据主义者的悬停元素的当前值。因此,如果我打开带有值的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/

2 个答案:

答案 0 :(得分:4)

我不确定这是可能的。 Datalist选项虽然仍在主文档DOM树中可见,但仍会被克隆并encapsulated作为Shadow DOM树的一部分,并且无法从父文档中访问。正是这些封装的Shadow DOM节点实际上已经悬停在(无论如何都在Chrome中),并且主DOM树中的原始节点不会被mouseoverhover事件触发当您将鼠标悬停在Shadow DOM节点上时。

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

Shadow DOM for input

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

答案 1 :(得分:-1)

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

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

此致