1

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

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

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

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

在 iPad 上查看下面的链接，你会明白我在说什么。它似乎不会发生在“click”事件上，但“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);
});
4

1 回答 1

0

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

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

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

于 2016-07-14T20:56:00.200 回答