觸摸事件不適用莫塔爾彈出窗口

Question

我在莫代爾彈出窗口的觸摸事件中有一個簡單和複雜的問題。在我的彈出窗口中，我顯示了一個圖像，對於該圖像我正在觸發觸摸事件，但它的作品有時候並不是幾乎所有的時間。 第二個問題是僅在該模式彈出式菜單上：滑動事件根本沒有觸發。 可能是什麼問題？ 以下是我在Logcat中收到的警告： 對於Modal彈出窗口中的每一次觸摸，我都會得到這個 W/webview（5558）：從webcore接收到的陳舊觸摸事件ACTION_DOWN;忽略

對於滑動模式彈出我得到︰ 11-14 12：42：09.420：W/webview（5558）：錯過一個拖動，因爲我們正在等待WebCore的觸摸響應。

有趣的事情是隻在莫代爾彈出其發生不是所有的屏幕。 任何幫助，將不勝感激

下面我使用JavaScript代碼模式彈出

var modal = (function() { 
var method = {}, $overlay, $modal, $content, $close; 

// Center the modal in the viewport 
method.center = function() { 
    var top, left, position; 
    top = Math.max($(window).height() - $modal.outerHeight(), 0)/2; 
    left = Math.max($(window).width() - $modal.outerWidth(), 0)/2; 
    $modal.css({ 
     top : top + $(window).scrollTop(), 
     left : left + $(window).scrollLeft() 
    }); 
}; 
// Open the modal 
method.open = function(settings) { 

    $content.empty().append(settings.content); 
    $modal.css({ 
     width : settings.width || 'auto', 
     height : settings.height || 'auto' 
    }); 
    method.center(); 
    $(window).bind('resize.modal', method.center); 
    $modal.show(); 
    $overlay.show(); 
}; 
// Close the modal 
method.close = function() { 
    // alert("Called close method"); 
    $modal.hide(); 
    $overlay.hide(); 
    $content.empty(); 
    $(window).unbind('resize.modal'); 
}; 

// Generate the HTML and add it to the document 
// $screen = $() 
$overlay = $('<div id="overlay"></div>'); 
$modal = $('<div id="modal"></div>'); 
$content = $('<div id="content"></div>'); 
$close = $('<a id="close" href="#">close</a>'); 

$modal.hide(); 
$overlay.hide(); 
$modal.append($content, $close); 
$(document).ready(function() { 

    $('body').append($overlay, $modal); 
//Here tried with image id, div id and modal BUT No work 
document.getElementById("content").addEventListener('touchstart', 
function(e){ onStart(e); }, false); 

    function onStart (touchEvent) { 

      var flag = confirm("Are you sure want to defuse it?") 
       if (flag == true) {     
       $('#bombImg').attr('src', 'img/undefused.png'); 

      } else { 
       $('#bombImg').attr('src', 'img/bomb01.png'); 
      } 
    touchEvent.preventDefault(); 
      modal.close(); 

     } 
}); 

return method; 
}()); 

// Wait until the DOM has loaded before querying the document 
//this method calling from another HTML file 
function showDialog(e) { 
disableZoomButtons(); 
$.get('popUp.html', function(data) { 
    modal.open({ 
     content : data 
    }); 
}); 
document.ontouchmove = function(e) { 
    return false; 
} 

modal.open({ 
    content : "<div id='imgDiv'><img id='bombImg' src='img/bomb01.png'/><br>" 
     + "</div>" 
}); 

e.preventDefault();  
}  

請人幫助我獲得解決這個問題。 我在Android 4.0以上版本

Answer 1

運行這個程序，你得把你的onStart()功能doc ready外：

function onStart (touchEvent) { 

     var flag = confirm("Are you sure want to defuse it?") 
      if (flag == true) {     
      $('#bombImg').attr('src', 'img/undefused.png'); 

     } else { 
      $('#bombImg').attr('src', 'img/bomb01.png'); 
     } 
touchEvent.preventDefault(); 
     modal.close(); 

    } 

$(document).ready(function() { 

$('body').append($overlay, $modal); 
//Here tried with image id, div id and modal BUT No work 
document.getElementById("content").addEventListener('touchstart', 
function(e){ onStart(e); }, false); 
});