无障碍(Voice over)和ios 8 safari - 活动

时间:2015-01-19 09:40:14

标签: ios javascript-events safari touch accessibility

这是关于交换辅助功能时的事件。

代码是这样的。当可访问性打开并且触摸事件获得注册事件未触发时。如果我没有注册触摸事件,那么一切正常。

我错过了什么吗?。

此代码适用于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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您不应依赖触摸事件。

打开VoiceOver时,设备的一般行为会发生变化:单点触摸即可说出元素;双击激活元素;向左或向右移动到上一个/下一个元素;等等 VoiceOver会拦截触摸事件并执行适当的工作。因此,触摸事件不会像往常一样转发到您的脚本。

某些从不转发,有些则以不规则的方式或不正常的顺序转发,有些仅在执行直通手势(长按两次)后转发。 如果您真的想使用触摸事件并在VoiceOver开启时使其正常工作,则必须仔细测试。最好的办法是完全远离触摸事件。

如果要添加自定义行为,例如向左/向右扫动以转到上一个/下一个幻灯片,旋转,缩放等。 您必须提供另一种方法来触发这些操作,例如单击按钮,因为VoiceOver用户否则将无法使用它们。