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

Question

我正在使用jQuery Chosen插件来设置选择框#foo的样式.我有一个块级链接(#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;}

这是我的小提琴.选择jQuery的css是小提琴的外部资源.

感谢帮助!

Answer 1

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

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