[英]Touch events are not working on Modal Popup
I am having one simple and complicated problem in touch events on Modal Popup window. 我在“模态弹出”窗口上的触摸事件中遇到一个简单而复杂的问题。 In my popup I have displayed one image, for that image I am firing touch event BUT its works some time and NOT work almost all times.
在我的弹出窗口中,我显示了一张图像,对于该图像,我触发了触摸事件,但它有时起作用,而几乎不能一直起作用。 Second problem is on that Modal popup only: Swipe events are not at all firing.
第二个问题是仅在模式弹出窗口上:滑动事件根本不会触发。 What might be the problem?
可能是什么问题? Below are warnings I am getting in Logcat: For every touch on Modal popup I am getting this W/webview(5558): Stale touch event ACTION_DOWN received from webcore;
以下是我在Logcat中得到的警告:对于Modal弹出窗口的每一次触摸,我都会得到此W / webview(5558):从webcore接收到过时的触摸事件ACTION_DOWN; ignoring
忽略
For swipe on Modal popup I am getting: 11-14 12:42:09.420: W/webview(5558): Miss a drag as we are waiting for WebCore's response for touch down. 在Modal弹出窗口上滑动时,我得到:11-14 12:42:09.420:W / webview(5558):由于我们正在等待WebCore的触地响应,因此缺少拖动。
Funny thing is only on Modal popup its happening NOT a all screens. 有趣的是,仅在Modal弹出窗口中发生的事情并非在所有屏幕上发生。 Any help would be greatly appreciated
任何帮助将不胜感激
Below javascript code I am using for Modal Popup 下面我用于模式弹出的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();
}
Please anybody help me to get resolve this. 请任何人帮助我解决此问题。 I am running this app in Android 4.0+
我正在Android 4.0+中运行此应用
You have to place your onStart()
function outside of doc ready
: 您必须将
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 );
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.