觸摸事件不適用於模式彈出窗口

Question

我在“模態彈出”窗口上的觸摸事件中遇到一個簡單而復雜的問題。 在我的彈出窗口中，我顯示了一張圖像，對於該圖像，我觸發了觸摸事件，但它有時起作用，而幾乎不能一直起作用。 第二個問題是僅在模式彈出窗口上：滑動事件根本不會觸發。 可能是什么問題？ 以下是我在Logcat中得到的警告：對於Modal彈出窗口的每一次觸摸，我都會得到此W / webview（5558）：從webcore接收到過時的觸摸事件ACTION_DOWN； 忽略

在Modal彈出窗口上滑動時，我得到：11-14 12：42：09.420：W / webview（5558）：由於我們正在等待WebCore的觸地響應，因此缺少拖動。

有趣的是，僅在Modal彈出窗口中發生的事情並非在所有屏幕上發生。 任何幫助將不勝感激

下面我用於模式彈出的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 );
});