可访问性(语音)和iOS 8 Safari-事件

问题描述 投票:0回答:1

这与打开辅助功能时的事件有关。

代码是这样的;当辅助功能打开且触摸事件获取已注册事件未触发时。如果我不注册触摸事件,那么一切正常。

我有什么遗漏吗?

此代码在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>

 
ios safari touch accessibility dom-events
1个回答
0
投票

您不应该依赖触摸事件。

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.