iOS Touch 事件在 DOM 插入时传递

iOS Touch event passes through on DOM insertion

本文关键字：插入 DOM Touch 事件 iOS      更新时间：2023-09-26

在iPad和iOS UIWebView上的移动野生动物园中，我看到了以下行为。

我有一个页面，它使用 javascript 替换了 DOM 元素的内容。第一页有一个按钮，按下该按钮将从容器元素中删除所有元素，并将一组新的 html 插入到容器中。

问题是，当按下按钮并切换出 html 时，触摸事件会传递到新插入的 html 页面。 就我而言，我们在第二页上有一个文本输入，与第一页上的按钮位于同一位置。因此，当按下按钮时，触摸事件会通过并将焦点放在文本输入上，软键盘就会出现。

有没有人详细说明为什么会发生这种情况或我如何防止此问题或此问题的任何解决方法？

在iPad上查看下面的链接，您将看到我在说什么。它似乎不会发生在"点击"事件中，但"touchstart"和"touchstop"都会发生这种情况。

http://jsfiddle.net/tcollins/BtmyD/embedded/result/

.HTML

<h3>Touch Start</h3>
<div id="container2">
  <button id="theButton2">Press Me</button>
</div>

JAVASCRIPT

$('#theButton2').bind('touchstart', function(){
   var html = '<input type="text">';
   $('#container2').empty().append(html);
});

您是否尝试过在追加之前添加evt.preventDefault();和evt.stopPropagation();？这样：

   $（'#theButton2'）.bind（'touchstart'， function（evt）{       evt.preventDefault（）;       evt.stopPropagation（）;       var html = '';       $（'#container2'）.empty（）.append（html）;    });

可悲的是，我没有iPhone，所以我不进行测试，但它应该阻止事件传播。

相关文章：