Question

我希望能够在iPhone上的按钮上使用双击，首先在时间点击中检测两个靠近而不是缩放屏幕。我发现这个帖子How to prevent doubletap zoom in iOS and Android之前我从未使用过Jquery，所以我的工作可能是可疑的。我已经包含了由我解释的代码，我将不得不收到有关此内容的评论，特别是因为它表现出必须由于我的实现而产生的虚假行为。我现在能够使用双击，但我的实现可能不健壮。我的应用是在跑步俱乐部使用秒表。除了双击之外，我的html工作正常，例如当2名选手靠近时。因此，我希望找到一种能够使用双击的方法。我的下面的代码是一个非常简洁的版本，我认为没有必要也不希望包括定时处理和计数等内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=800, user-scalable=no">

<style type="text/css"> 

   .center {
   margin-left:auto;
   margin-right:auto;
   text-align:center;
   width:35%;
   background-color:#b0e0e6;}

.lap { color: red;  padding: 5px; border:none; height:700px; width: 780px; margin:0px 0px 0px 0px;text-align:center; font-family: courier, monospace, verdana, arial, helvetica, sans-serif; border:1px solid red;font-size:3.1em;}
.button { width: 520px; height: 100px; margin:10px 25px 55px 25px;  text-align:center;font-size: 3em;}

p{
   margin:0px;
} 

body { 
   background: url("images/PageBackGnd.jpg");
   font-family: verdana, arial, helvetica, sans-serif; 
   background-color: #FFFFFF;
   font-size: 16px;
   color: black;
   text-align : center;
   min-width : 800px;
   margin:0;
   padding:0;
   text-align:center;
}
div.wrapper {
 width : 800px ;
 text-align : left ;
 margin-left : auto ;
 margin-right : auto ;
 position : relative ;
 background-color:#FFFFFF;
 } 

div.pageContent {
   width:800px;
   background-color:#FFFFFF;
}

</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">

   function marklap(presses){
   var lapdetails = document.getElementById('lapdetails');
   lapdetails.value = presses + '\n' + lapdetails.value
   }

(function($) {
var count = 0;
$.fn.nodoubletapzoom = function() {
   $(this).bind('touchstart', function preventZoom(e){
   var t2 = e.timeStamp;
   var t1 = $(this).data('lastTouch') || t2;
   var dt = t2 - t1;
   var fingers = e.originalEvent.touches.length;
   $(this).data('lastTouch', t2);
   if (!dt || dt > 500 || fingers > 1){
   //alert('X');
   //e.preventDefault();
   return; // not double-tap
   }
   e.preventDefault(); // double tap - prevent the zoom
   // also synthesize click events we just swallowed up
   alert('Double');
   $(e.target).trigger('click').trigger('click');

   });
};
})(jQuery);

$(document).on('pagecreate', function(){
   $("body").nodoubletapzoom();
   $("textarea#lapdetails").css({'height':'300px', 'width':'750px'});
});

</script>
</head>
<body>

<div class="wrapper"><!-- all content goes here -->
<div class="pageContent">
   <div style="text-align:center;">

   <p><input class="button" id="startandstopbutton" value="Start/Stop" onclick="marklap('X')" type="button"></p>
<p><textarea class="lap" id="lapdetails" readonly></textarea></p>
   </div>
</div>
</div>
</body>
</html>

接下来的问题是，在浏览器屏幕的底部，“加载”被写在屏幕上。我找到了帖子"LOADING" message generated at the bottom of the page in JQM我尝试了以下建议的解决方案：

<script type="text/javascript">
$(document).bind('mobileinit',function(){
    $.mobile.loadingMessage = false;
})
</script>

在Jquery移动加载之前但没有成功。也许有一个加载错误，它不能被掩盖，也许这应该被调查，但如何？

我想补充一点，我对布局完全满意，没有任何特殊的格式，所以我不需要在这方面使用Jquery，我只使用Jquery来使用双击。

我的textarea的高度太短了，我在$("textarea#lapdetails").css({'height':'300px', 'width':'750px'});尝试了$(document).on('pagecreate', function(){，但这并没有调整高度，只调整宽度。有没有办法可以使用/继承高度：700px;来自CSS的这些文本区域？

下一个问题与我的按钮有关，此按钮的值为value="Start/Stop"这在按钮中正确呈现，但也会写入按钮左侧的屏幕。

非常感谢您花时间阅读本文。

更新

我已经整理了按钮左侧的文本问题以及文本区域的有限大小。 How can i stop jQuery mobile to apply styles to my specific form elements解决方案是在data-role="none"中添加<input type="text" name="foo" data-role="none" />。

为了澄清这一点，我在页面底部的“加载”文本一直在那里，例如几小时后。

更新2 我已经整理了正在加载邮件问题。一旦我加载了CSS <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">我就把它拿出来了，因为我不喜欢造型。现在我重新开始，我正在努力解决这些问题。

如何防止iOS和Android中的双标记缩放;无法修复虚假写入屏幕

0 个答案: