Событие iOS Touch проходит через вставку DOM

Question

В мобильном сафари на iPad и в iOS UIWebView я вижу следующее поведение.

У меня есть страница, которая заменяет содержимое элемента DOM с помощью javascript. На первой странице есть кнопка, которая при нажатии удаляет все элементы из элемента контейнера, и новый набор html будет вставлен в контейнер.

Проблема заключается в том, что при нажатии кнопки и отключении html событие касания переходит к недавно вставленной странице html. В моем случае у нас есть текстовый ввод на 2-й странице в том же положении, что и кнопка на первой странице. Таким образом, когда кнопка нажата, событие касания проходит и фокусирует внимание на текстовом вводе, и появляется мягкая клавиатура.

У кого-нибудь есть информация о том, почему это происходит или как я могу предотвратить это или любые обходные пути для этой проблемы?

Просмотрите ссылку ниже на 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(); перед вашим Append? Как так:

 

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

К сожалению, у меня нет iPhone, так что я его испытание Невозможно открыть, но это должно остановить событие от распространяющейся.