javascript - iScroll 4 不适用于表单 <select> 元素 iPhone Safari 和 Android 浏览器

Question

我正在使用这个 HTML 代码:

<form action="#" method="post">
    <fieldset>
        <label class="desc" id="title10" for="Field10">
            How many children do you have?
        </label>        
        <select id="Field10" name="Field10" class="field select large" tabindex="5">
            <option value="0" selected="selected">0 </option>
            <option value="1">1 </option>
            <option value="2">2 </option>
            <option value="3">3 </option>
            <option value="4">4 </option>
            <option value="5">5 </option>
            <option value="6">6 </option>
            <option value="7">7 </option>
            <option value="8">8 </option>
            <option value="9">9 </option>
        </select>
        <input type="submit" value="Send message" />
    </fieldset>
</form>

<select>不适用于 iPhone 和 Android。当我点击选择框时没有任何反应。

我正在使用产生问题的 iScroll 4。

<script type="application/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript">
    var myScroll;
    function loaded() {
        myScroll = new iScroll('wrapper');
    }
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

我认为 this is a solution但我不知道如何实现。

Answer 1

问题是 iScroll 取消了 select 标签的默认行为(如果你问我，这不是一个很好的实现)。

这发生在第 195 行的 _start() 函数中:

e.preventDefault();

如果您将其注释掉，您会注意到 select 标记再次起作用。

但将其注释掉意味着您已经破解了该库，这可能会破坏其他理想的 iScroll 功能。所以这里有一个更好的解决方法:

var selectField = document.getElementById('Field10');
selectField.addEventListener('touchstart' /*'mousedown'*/, function(e) {
    e.stopPropagation();
}, false);

该代码将允许发生默认行为，而不会将事件传播到 iScroll 那里它搞砸了一切。

由于您的 JS 不在任何类似 jQuery 的 onReady() 事件中，因此您必须确保将此代码 AFTER 放在您的 HTML 中 select 元素被定义。

请注意，对于移动设备，事件是 touchstart，但对于您的 PC 浏览器，事件是 mousedown