Edge浏览器中使用jQuery绑定<option>点击事件无效问题求助

这个问题确实有不少开发者碰到过——不同浏览器对<option>元素的事件支持存在明显差异，Chromium内核的Edge（包括最新版）本身就不会触发<option>的click事件，这属于浏览器行为差异，并非代码bug。

兼容解决方案 #

最稳妥的兼容方案是放弃监听<option>的click事件，转而监听<select>的change事件，因为所有主流浏览器都稳定支持这个事件，且能准确捕捉到用户选择选项的操作。

针对你用jQuery 1.9.1绑定data-hide/data-show属性的场景，可以这样改写代码：

$('select').on('change', function() {
    var $selected = $(this).find('option:selected');
    // 处理隐藏逻辑
    if ($selected.data('hide')) {
        $($selected.data('hide')).hide();
    }
    // 处理显示逻辑
    if ($selected.data('show')) {
        $($selected.data('show')).show();
    }
});

补充说明 #

• 如果需要处理用户重复选择同一选项的场景（change事件仅在选项值变化时触发），可以额外监听<select>的click事件，结合当前选中状态做判断，但核心逻辑仍建议以change事件为主，避免浏览器兼容问题。
• 不要尝试在Chromium系浏览器中用mouseup等事件替代click，这类事件的触发时机不稳定，容易出现异常。

内容的提问来源于stack exchange，提问作者Bernhard Kraus