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 回答