我试图获取数据主义者的悬停元素的当前值。因此,如果我打开带有值的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/
答案 0 :(得分:4)
我不确定这是可能的。 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上的事件的详细信息。
答案 1 :(得分:-1)
我认为你必须检查$("#browser")
而不是$("#browsers")
但无论如何,你会更好地获得onchange上的价值:)
此致