Question

我在移动游戏中的iframe中遇到了触摸事件和内容的问题。我在iframe中有一个用户可以输入的文本输入框。在主页上，在iframe之外，有一个带有touchstart事件监听器的容器。如果您开始在输入框中输入内容，然后滚动触发touchstart事件的页面，您将无法再输入输入框。光标仍然存在并闪烁，键盘仍然显示，键盘事件继续触发，但字符根本不会显示在输入框中。

以下是两个用于显示问题的精简文件：

的test.html：

<html>
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
    <div id="test" style="height:200px;"></div>
    <iframe src="test2.html"></iframe>
    <script type="text/javascript">
        var test = document.getElementById('test');
        test.addEventListener('touchstart', function(){ console.log('touchstart'); });
    </script>
</body>
</html>

test2.html

<html>
    <body>
        <input id="input" type="text">
        <script type="text/javascript">
            var input = document.getElementById('input');
            input.addEventListener('keyup', function(){ console.log('keyup'); });
        </script>
    </body>
</html>

如果删除（或注释掉）touchstart事件监听器，一切正常。我在其中放了一些console.log语句，以显示哪些事件正在触发以及何时触发。

我发现了一些类似问题的讨论（例如Touch events on parent document fire hover states in iframe in mobile safari. Is this a bug? Is there a workaround?），但没有找到任何人提出解释或解决方法。有没有其他人遇到这个问题，你有没有找到解决方法？它似乎只是一个移动的safari问题，它在android上工作正常。

Touchstart事件监听器干扰了在移动Safari中输入子iframe

0 个答案: