这与打开辅助功能时的事件有关。
代码是这样的;当辅助功能打开且触摸事件获取已注册事件未触发时。如果我不注册触摸事件,那么一切正常。
我有什么遗漏吗?
此代码在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>
您不应该依赖触摸事件。
当VoiceOver开启时,设备的一般行为会发生变化:单点触摸即可说出元素;双击激活元素;向左或向右移动到上一个/下一个元素;等等VoiceOver会拦截触摸事件并执行适当的工作。因此,触摸事件不会像往常一样转发到您的脚本。
有些从不转发,有些则以不规则的方式或不正常的顺序进行,有些仅在执行直通手势(长按两次)后才转发。如果您真的想使用触摸事件并在VoiceOver开启时使其正常工作,则必须仔细测试。最好的办法是完全远离触摸事件。
如果添加自定义行为,例如向左/向右扫动以转到上一个/下一个幻灯片,旋转,缩放等。您必须提供其他选择来触发这些操作,例如单击按钮,因为VoiceOver用户否则将无法使用它们。