JQuery .on("mouseover") 方法不适用于 IE答案

【问题标题】：JQuery .on("mouseover") method not working for IEJQuery .on("mouseover") 方法不适用于 IE
【发布时间】：2016-07-30 23:08:51
【问题描述】：

我试图在鼠标悬停时返回动态填充的选择选项的值。从 ID 可能就可以看出，选择选项是由 ASP.NET 列表框创建的。

$("#MainContent_LocationListBox").on("mouseover", "option", function () {

    alert($(this).val());
});

此方法适用于 Chrome，但不适用于 IE 11。

我一直在尝试其他人的解决方案来解决类似的问题，但没有运气。

我尝试过的：

不同版本的 JQuery（目前为 1.8.3）
.live 方法
$(document).on("mouseover", "option", function ()
$("#MainContent_LocationListBox option").on("mouseover", null, function ()
循环选择选项并将鼠标悬停绑定到每个选项
添加<meta http-equiv="X-UA-Compatible" content="IE=edge">（我找到的几篇文章的建议）

我也尝试过$("#MainContent_LocationListBox option:hover").val()，但效果非常不一致。

我打开了 Internet Explorer 调试，但没有返回错误。

【问题讨论】：

把你的委托事件监听器放在$(document)选择器上是草率和浪费的；你应该把它们放在尽可能靠近目标的地方。
喜欢元素的 id 可能是@Robusto？就像 OP 的代码已经做了什么一样？
我仍然对为什么开发人员必须继续支持连微软都拒绝支持的浏览器感到困惑。
@Kendo 因为私人公司已经花费了数百万美元来构建不会很快消失的 IE 内部专有应用程序？
@ScottMarcus 没错，是的，从来没有考虑过。

标签： javascript jquery asp.net internet-explorer

【解决方案1】：

您可以使用mousemove 代替mouseover。以下代码适用于 Internet Explorer、Firefox 和 Chrome：

更新：由于在 Windows 10 上的测试失败，我添加了一个 setTimeout 调用，根据建议给 here：

$(document).ready(function () {
    var prevValue = null;

    $("#MainContent_LocationListBox").mousemove(function () {
        setTimeout(function () {
            var val = $('option:hover', $("#MainContent_LocationListBox")).val();

            if (typeof val !== 'undefined') {
                if (val !== prevValue) {
                    console.log(val); // To be replaced by actual processing
                    prevValue = val;
                }
            }
            else {
                prevValue = null;
            }
        }, 0);
    });
});

在调试鼠标事件时，我更喜欢在控制台中记录值（可以用 F12 显示）而不是弹出alert 框。

【讨论】：

当你说这在 IE 中有效时，我相信你，它对我不起作用（Win10 IEv11）。我尝试过不同的 JQuery 版本、不同的元标记、重置 IE、不同的文档模式和用户代理字符串。控制台中有 0 个错误。我的问题似乎是 ":hover" 99% 的时间返回一个 "undefined" 的值。
我在 Windows 7 上进行了测试。该代码适用于您的 Windows 10 上的其他浏览器？
我更新了我的答案。在我的示例中超时为 0。如果不起作用，您可以尝试使用更大的值。
这行得通！我猜 IE 在提取值时会超前，超时让它有点犹豫？
类似的东西，是的。您可以在我发现该技巧的文章中看到解释 (roslindesign.com/2011/05/04/…)。奇怪的是，老版本的 IE 给出了这个技巧......

【解决方案2】：

与其将事件委托添加到选择选项中，不如将其添加到选择中。

$("#MainContent_LocationListBox").on("mouseover", function () {
  alert($(this).val());
});

或者如果您希望有事件委托

$("section").on("mouseover", "#MainContent_LocationListBox", function () {
  alert($(this).val());
});

编辑：我认为您误解了如何从选择框中获取值。使用 jQuery，您可以在选择框上使用 $('select').val()。

有关使用 jQuery .on() http://api.jquery.com/on/987654321@ 进行事件委托的更多信息

【讨论】：

这似乎返回了 select 的值而不是单个选项。但是， $(this) 包含选项及其值的数组。我尝试使用类似 $(this)[hoveredOptionIndex].val() 的方式访问此数组，但未能成功提取索引。
@bradyGilley 选择的value 是用户选择的内容。如果你想要索引，你可以通过selectNodeReference.selectedIndex轻松获取
那么像 $(this)[this.selectedIndex].val()？这似乎返回所选选项的索引。我需要悬停选项的索引。