javascript - 在 ipad 上选择时，jQuery Chosen 选择选项会触发具有较低 z 索引的链接

Question

我正在使用 jQuery Chosen 插件来设置选择框 #foo 的样式。我有一个 block 级链接 (#bar)，它位于 #foo 正下方并且具有较低的 (0) z 索引。 #foo 的选项的 z-index 为 1010。

在我的 ipad mini 上，当我从 #foo 中选择一个选项时，链接 (#bar) 被触发。我在 Android 平板电脑上没有任何问题，在任何非触摸浏览器上也没有任何问题。只是 iPad

这是我的代码:

<select id="foo">
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
    <option>foo</option>
</select>

<a href="http:www.stackoverflow.com" id="bar">GO!</a>

和 CSS

#foo {width:300px;}

#bar {display:block; width:400px; height:100px; color:#FFF; text-align:center; font-size:30px; background:#FF0000; line-height:90px; z-index:0;}

here是我的 fiddle 。所选 jQuery 的 css 在 fiddle 的外部资源中。

感谢您的帮助!

Answer 1

一个简单的解决方案是监听 touchend 事件并停止传播。这是 jQuery :

$('.chosen-container .chosen-results').on('touchend', function(event) {
    event.stopPropagation();
    event.preventDefault();
    return;
});