Question

在我的网络应用中，我有不同z-indices的iframe。我正在检测iframe中某些元素的touchstart个事件。但是，如果我的文本输入字段与捕获touchstart的元素重叠，则输入字段开始表现不正常：在字段中第二次点击未聚焦它，您无法选择任何文本，但您可以输入文本字段。

似乎唯一的解决方案可能是停止在后台帧上捕获touchstart个事件。我更喜欢像透明div这样的解决方案来捕获事件作为中间人，但我还没有得到这样的工作。还有其他解决方法吗？

示例页面位于jsfiddle，但这里是代码：

<!DOCTYPE html> 
<html> 
    <head> 
        <style type='text/css'> 
            iframe {
                position:absolute;
            }
            #background {
                border: solid 3px red;
                z-index:1;
                width: 20em;
                height: 20em;
            }
            #foreground, #foreground2 {
                border: solid 2px yellow;
                z-index:2;
                top: 15em;
                height: 5em;
            }
            #foreground2 {
                top: 22em;
            }
        </style> 

        <script type='text/javascript'> 
            window.onload=function(){
                document.getElementById("foreground").contentDocument.write("<input type='text' value='text'/><input type='text'/>");
                document.getElementById("foreground2").contentDocument.write("<input type='text' value='text'/><input type='text'/>");

                document.getElementById("background").addEventListener("touchstart", function() {
                    console.log("touch");
                });
            }
        </script> 
    </head> 
    <body> 
        <iframe id=background></iframe> 
        <iframe id=foreground></iframe> 
        <iframe id=foreground2></iframe> 
    </body>
</html>

Answer 1

没有“好”的解决方案。在我的特殊情况下，由于我不需要监视“背景”iframe中的触摸事件，我只是在后台关闭该事件处理程序，并将它们添加回前台。不幸的是，Javascript没有任何方法可以找出附加到节点的事件。在我的例子中，我独立地跟踪它，它工作正常。

有趣的是，即使您只是尝试在单个iframe中捕获touchstart事件，也会出现这种情况：enter link description here。我怀疑是一种解决方法

Answer 2

大卫是对的。我知道，我没有办法解决这个问题，我花了很多时间试图找到它。唯一要做的是在打开iframe叠加层时删除所有触摸事件的EventListener，然后在iframe关闭时重新添加EventEistener。执行此操作的唯一方法是使用公共命名函数作为事件侦听器，以便可以将其删除。有一天，DOM级别3将被实现，您可以通过使用eventListenerList（）来查看匿名或私有事件侦听器的函数“name”，但是没有浏览器使用它。

有趣的是，只有当iframe中的表单元素直接位于具有触摸事件侦听器的元素之上时，才会出现此问题。 iframe中不在触摸事件侦听元素之上的表单元素将正常工作。在某些情况下（非我的），替代解决方案可能能够在iframe打开时将背景元素的高度更改为1px，并在iframe叠加层关闭时将其高度重置为完整大小。

带有iframe和ontouchstart的Mobile Safari中的文本选择错误

2 个答案: