触摸事件不适用莫塔尔弹出窗口

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); 
});