Question

在iPad和iOS UIWebView上的移动Safari中我看到以下行为。

我有一个页面用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);
});

Answer 1

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


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

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

iOS Touch事件在DOM插入时传递

1 个答案: