javascript - Android 上的 PhoneGap 选择框行为不当

Question

我的应用程序中有一些选择框，它们显示正确，可以选择(即:可以单击它们，显然可以进行选择)，但行为不符合预期:

单击列表中的某个项目后，该选项的名称/值不会填充到表单中。

我发现了很多关于选择框问题的 stackoverflow 问题/答案，但似乎没有一个完全是我的问题。尽管如此，我尝试了这些建议，但没有成功，包括在选择框中放置一个高 z-index 值、向 CSS 添加一些 -webkit 特定值等。

我已经尝试过:

<select> box not displaying on Android in PhoneGap

<select> not working in Phonegap app on Android 2.3.3

PhoneGap build webkit-appearance no drop down arrow for select tag

https://github.com/jquery/jquery-mobile/issues/6992

https://www.daniweb.com/web-development/threads/451455/phonegap-select-box-is-not-working

不涉及 jQuery。

关于选择框我遗漏了什么吗？

一个例子——HTML:

<select name="people0" id="people0" onfocus="isDirty=1" style="display:inline-block;min-width:150px;" data-native-menu="true">
        <option value="0">Choose Person</option>
            <option value="15098">Desjardins, Emily</option>
        <option value="17304">Hulley, Patrick</option>
        <option value="1">Silver, Jason</option>
</select>

CSS:

select{
    /* Suggestions found: having trouble with not being able to select items: */
    -webkit-user-select: auto !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index:1000 !important;
}

11 月 8 日更新:

我找到了一个糟糕的解决方法——但至少你可以选择选项。当 HTML 响应来自服务器时，我检查其中是否有 select 元素，如果有，则将事件监听器附加到它们:

var allSelectElements = document.getElementsByTagName('select');
for (var i=0; i < allSelectElements.length; i++) {
    allSelectElements[i].addEventListener('touchstart', function(e) {
        alert('initiating touch');
        this.focus;
    }, false);
}

我希望有人能一劳永逸地解决这个问题。 :-/

Answer 1

我使用类似的代码解决了:

var allSelectElements = document.getElementsByTagName('select');
for (var i=0; i < allSelectElements.length; i++) {
    allSelectElements[i].addEventListener('touchstart', function(e){
        //This is the important line
        e.stopPropagation(); 
    }, false);
}