这是关于交换辅助功能时的事件。
代码是这样的。当可访问性打开并且触摸事件获得注册事件未触发时。如果我没有注册触摸事件,那么一切正常。
我错过了什么吗?。此代码适用于ios 7及以下版本。但问题只有ios 8及以上(最新版本)。
<html >
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<title></title>
<style>
.displayTable{
display:table;
table-layout:fixed;
border-collapse:collapse;
}
.displayRow{
display:table-row;
}
.displayCell{
display:table-cell;
white-space:nowrap;
}
</style>
</head>
<body>
<div id="outparent">
</div>
<script>
var p1 = document.getElementById('outparent');
function enableTouchEvents() {
p1.addEventListener('touchstart', onTouch);
p1.addEventListener('touchmove', onTouch);
p1.addEventListener('touchend', onTouch);
}
function removeTouchEvents() {
p1.removeEventListener('touchstart', onTouch);
p1.removeEventListener('touchmove', onTouch);
p1.removeEventListener('touchend', onTouch);
}
function render() {
var str = '<form id="form"> \
<div id="inparent"> \
<div style="table-layout:fixed;display:table" > \
<div style="display:table-row" >\
<div style="display:table-cell"> \
<input id="b2" value="submit me!" type="submit" /> \
</div></div> \
<div style="display:table-row">\
<div style="display:table-cell"> \
<input id="b1" value="click me!" type="button" /> \
</div></div> \
</div> \
</div> \
</form>';
p1.innerHTML = str;
}
p1.addEventListener('click', function (e) {
//console.log('out clicked ' + e.target.id);
alert('you clicked on ' + e.target.id);
e.preventDefault();
});
function onTouch(e) {
console.log('event type ' + e.type + ' ' + e.timeStamp);
}
render();
// comment this everything works fine.
enableTouchEvents();
</script>
</body>
</html>
&#13;
答案 0 :(得分:0)
您不应依赖触摸事件。
打开VoiceOver时,设备的一般行为会发生变化:单点触摸即可说出元素;双击激活元素;向左或向右移动到上一个/下一个元素;等等 VoiceOver会拦截触摸事件并执行适当的工作。因此,触摸事件不会像往常一样转发到您的脚本。
某些从不转发,有些则以不规则的方式或不正常的顺序转发,有些仅在执行直通手势(长按两次)后转发。 如果您真的想使用触摸事件并在VoiceOver开启时使其正常工作,则必须仔细测试。最好的办法是完全远离触摸事件。
如果要添加自定义行为,例如向左/向右扫动以转到上一个/下一个幻灯片,旋转,缩放等。 您必须提供另一种方法来触发这些操作,例如单击按钮,因为VoiceOver用户否则将无法使用它们。