iScroll 4不工作形式LT;选择>元iPhone Safari和Android浏览器浏览器、形式、工作、LT

2023-09-12 01:06:33 作者:꧁你不配꧂

我用这个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

 
精彩推荐
图片推荐