辅助功能（配音）和 iOS 8 Safari - 事件答案

【问题标题】：Accessibility (Voice over ) and iOS 8 safari - events辅助功能（配音）和 iOS 8 Safari - 事件
【发布时间】：2019-11-14 13:28:23
【问题描述】：

这是关于开启辅助功能时的事件。

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

我错过了什么吗？

此代码适用于 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>

【问题讨论】：

你能描述一下应该发生什么以及有什么区别吗？
嗨，当我通过“enableTouchEvents()”注册触摸事件时，我没有收到按钮点击事件。如果我没有注册触摸事件，那么按钮点击事件就会触发。仅当打开可访问性时才会发生这种情况。
您确定没有在任何触摸事件处理程序中调用 e.preventDefault() 或 e.stopPropagation() 吗？这将阻止点击触发。
另外，您可能应该在 addEventListener 和 removeEventListener 调用中添加“false”作为第三个参数。
嗨，这是设备上运行的唯一代码。没有 preventDefault 或 stopPropagation。可能你可以试试。我尝试在调试器中通过“monitorEvents()”来监控事件，但它只显示“touchstart”和“touchend”事件而不是点击事件

标签： ios safari touch accessibility dom-events

【解决方案1】：

您不应该依赖触摸事件。

当 VoiceOver 开启时，设备的一般行为会发生变化：单次触摸会说出元素；双击激活元素；向左或向右扫动到上一个/下一个元素；等等 VoiceOver 截取触摸事件并做适当的工作。因此，触摸事件不会像往常一样转发到您的脚本。

有些永远不会转发，有些只是以不稳定的方式或不寻常的顺序，有些仅在完成直通手势（双击）后才转发。如果你真的想在 VoiceOver 开启的情况下使用触控事件并让它们正常工作，你必须仔细测试。最好的办法可能是完全远离触摸事件。

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

【讨论】：