iScroll 4不工作形式LT;选择＆GT;元iPhone Safari和Android浏览器 [英] iScroll 4 not working with form <select> element iPhone Safari and Android browser

问题描述

我用这个HTML code：

I'm using this HTML code:

<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>

＆LT;选择＆GT; 不工作在iPhone和Android。当我点击的选择框没有任何反应。

<select> is not working on iPhone and Android. When I tap on the selectbox nothing happens.

我用iScroll 4这是创造的问题。

I'm using iScroll 4 which is creating the problem.

<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>

我觉得这是一个解决方案但我不'知道如何实现它。

I think this is a solution but I don't know how to implement it.

推荐答案

问题是，iScroll取消的默认行为，你的选择标记（不是一个很好的实现，如果你问我）。

The problem is that iScroll cancels the default behavior of your select tag (Not a very good implementation if you ask me).

这是发生在 _start（）功能上线195：

This occurs in the _start() function on line 195:

e.preventDefault();

如果你对此有何评论说出来，你会发现选择标签再工作。

If you comment that out you'll notice the select tag works again.

但评论它意味着你已经砍死这可能会破坏其他可取iScroll功能库。所以这里有一个更好的解决方法：

But commenting it out means you've hacked the library which might break other desirable iScroll functionality. So here's a better workaround:

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

这code将使发生的默认行为，不传播事件iScroll它螺丝一切。

That code will allow the default behavior to occur, without propagating the event to iScroll where it screws everything up.

由于您的JS是不是内部的任何jQuery的，如 onReady（）时，你必须确保你把这个code的后的，你的选择元素中定义的HTML。

Since your JS is not inside any jQuery-like onReady() event, you'll have to make sure to you put this code AFTER the HTML where your select elements are defined.

请注意，对于移动设备的事件是 touchstart ，但对你的电脑浏览器，它会被鼠标按下 的

Note that for mobile devices the event is touchstart, but for your PC browser it will be mousedown

这篇关于iScroll 4不工作形式LT;选择＆GT;元iPhone Safari和Android浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！