Nic*_*247 22 html5 webkit web-applications ios ios7
看到转基因种子已经发布,我们现在可以谈谈它!
看起来在iOS7中"-webkit-overflow-scrolling:touch"被破坏了.最初屏幕外的元素的触摸事件不会触发(或者在某些情况下是不可靠的).
这是一个例子:
<!DOCTYPE html><html>
<head><title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
#scrollbox {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.touchDiv {
position: relative;
width:100%;
height:80px;
background-color: #FFBBBB;
}
ul, li {
text-indent: 0px;
list-style: none;
padding: 0px;
margin: 0px;
}
li {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
</style>
<script type="text/javascript">
function onBodyLoad() {
var touchDiv = document.getElementById("bottomDiv");
touchDiv.ontouchstart = function(e) {
alert("touched");
};
touchDiv = document.getElementById("topDiv");
touchDiv.ontouchstart = function(e) {
alert("touched");
};
}
</script>
</head>
<body onload="onBodyLoad()">
<div id='scrollbox'>
<div id="topDiv" class="touchDiv">Fires an event when touched</div>
<ul>
<li><a href='#' onclick="alert('1')">Link 1</a></li>
<li><a href='#' onclick="alert('3')">Link 3</a></li>
<li><a href='#' onclick="alert('4')">Link 4</a></li>
<li><a href='#' onclick="alert('5')">Link 5</a></li>
<li><a href='#' onclick="alert('6')">Link 6</a></li>
<li><a href='#' onclick="alert('7')">Link 7</a></li>
<li><a href='#' onclick="alert('8')">Link 8</a></li>
<li><a href='#' onclick="alert('9')">Link 9</a></li>
<li><a href='#' onclick="alert('10')">Link 10</a></li>
<li><a href='#' onclick="alert('11')">Link 11</a></li>
<li><a href='#' onclick="alert('12')">Link 12</a></li>
<li><a href='#' onclick="alert('13')">Link 13</a></li>
<li><a href='#' onclick="alert('14')">Link 14</a></li>
<li><a href='#' onclick="alert('15')">Link 15</a></li>
<li><a href='#' onclick="alert('16')">Link 16</a></li>
<li><a href='#' onclick="alert('17')">Link 17</a></li>
<li><a href='#' onclick="alert('18')">Link 18</a></li>
<li><a href='#' onclick="alert('19')">Link 19</a></li>
<li><a href='#' onclick="alert('20')">Link 20</a></li>
<li><a href='#' onclick="alert('21')">Link 21</a></li>
<li><a href='#' ontouchstart="alert('22')">Link 22</a></li>
</ul>
<div id="bottomDiv" class="touchDiv">Fires an event when touched 2</div>
</div>
</body>
我想这将打破大多数移动优化的网络应用程序.
上述代码有什么问题吗？和/或有任何变通方法吗？
(我已经提出了苹果的错误 - 前一段时间,没有回复)
Nic*_*247 30
看起来在apple dev论坛上有一个解决这个问题的方法
非常感谢Baicoianu先生.
基本上你需要在父滚动div上听取触摸事件.所以在我的情况下添加:
document.getElementById("scrollbox").addEventListener('touchstart', function(event){});
到onBodyLoad函数.
我想这是一些事件传播问题,通过在更高层次上进行聆听来解决.
上面的答案对我有用.以下是上述修复的jQuery版本:
$('#scrollbox').on('touchstart', function(event){});
| 归档时间： |
|
| 查看次数： |
52278 次 |
| 最近记录： |