jQueryMobile PhoneGap应用程序上偶尔没有响应的后退按钮
Ada*_*tle 6 javascript css touch jquery-mobile cordova
我使用jQuery Mobile(1.3.1)和PhoneGap(3.4)创建了一个应用程序,并将其设置为具有相当"平坦"外观的界面:
我遇到了一些麻烦,只有在iOS上才有,而且只是偶尔,只有一个屏幕上的"后退"按钮变得没有响应.其他屏幕上后退按钮的相同HTML和CSS似乎很好,它只是这一个屏幕.这里是chrome,在devtools中选中了按钮以突出显示其命中区域:
只是为了好的衡量标准,这里也是标题:
此屏幕标题的代码对于应用中的几乎每个屏幕都是相同的:
<div data-role="header" data-theme="e" data-position="fixed" data-tap-toggle="false">
<h1>Event Detail</h1>
<a data-rel="back">Back</a>
</div>
我们发现,如果用户卡在此屏幕上并强制关闭应用程序,该按钮似乎在后续使用中按预期工作.
所以我现在的理论是标题以某种方式妨碍了后退按钮(有时候).但事实并非每次都让我完全不相信这个理论.
该按钮的z-index设置为10,标题的z-index保留为默认值(1,正确？).因此即使是标题阻碍了我的理解,我的理解是10的z-index应该将按钮"置于顶部"并为其提供第一次接收点击/点击事件的机会.
该应用程序使用jQueryMobile 1.3.1,因为它的创建时间和方式的时间安排,此时升级不是一个合理的选择.(1.4.x中出现了大量的重大变化)
我已经在iOS和Android上调试了应用程序,并且没有抛出任何JavaScript错误.我完全不知道该做什么.这个应用程序正在向成千上万的用户推出,并且很可能很多人(可能是大多数人)会遇到这个错误.我宁愿不必解释(我的双腿之间的尾巴)强制关闭是解决这个问题的唯一方法......但这就是我到目前为止所做的事情.
有没有人对如何解决这个问题有任何建议或想法？
更新1:
我同时远程调试通过USB Safari中的应用程序,我可以看的背面按钮来更改类注意到,当挖掘,从ui-btn-up-e对ui-btn-hover-e简单地ui-btn-down-e和回ui-btn-up-e-但应用程序是不会回来了!:(
根据要求,这里是应用于标题,H1和后退按钮的CSS :(只是"计算"的最终值,而不是所有中间重写的值)
标题div:
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(179, 27, 27);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(179, 27, 27);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(179, 27, 27);
border-left-style: solid;
border-left-width: 0px;
border-right-color: rgb(179, 27, 27);
border-right-style: solid;
border-right-width: 0px;
border-top-color: rgb(179, 27, 27);
border-top-style: solid;
border-top-width: 1px;
color: rgb(255, 255, 255);
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-weight: bold;
height: 45px;
left: 0px;
padding-top: 1px;
position: fixed;
right: 0px;
text-shadow: rgb(85, 85, 85) 0px 1px 0px;
top: -1px;
width: 320px;
z-index: 1000;
zoom: 1;
H1:
color: rgb(255, 255, 255);
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
height: 23px;
margin-bottom: 10px;
margin-left: 48px;
margin-right: 48px;
margin-top: 12px;
min-height: 19.799999237060547px;
outline-color: rgb(255, 255, 255);
outline-style: none;
outline-width: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: center;
text-overflow: ellipsis;
text-shadow: rgb(85, 85, 85) 0px 1px 0px;
white-space: nowrap;
width: 224px;
zoom: 1;
返回键:
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-box-shadow: none;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(179, 27, 27);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(179, 27, 27);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(179, 27, 27);
border-left-style: solid;
border-left-width: 0px;
border-right-color: rgb(179, 27, 27);
border-right-style: solid;
border-right-width: 0px;
border-top-color: rgb(179, 27, 27);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 0px;
box-shadow: none;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-weight: bold;
height: 31px;
left: 5px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 0, 0) 0px 1px 0px;
top: 15px;
vertical-align: middle;
width: 60px;
z-index: 10;
zoom: 1;
首先让我告诉你，你的问题可能与按钮/标题 CSS 无关。如果此错误偶尔出现并且仅在后退功能期间出现，则问题可能是由于data-rel="back"功能造成的。
与经典的 href 页面移动不同，data-rel="back"使用 JavaScript 导航历史记录，该历史记录可能有效也可能无效，具体取决于您的应用程序内容。因为 jQuery Mobile 使用 AJAX 进行页面处理（并且从您的按钮我可以看到您正在使用此方法），所以它也有自己的处理导航历史记录的方式。
现在，假设您的应用程序大量使用动态内容生成（包括内容删除），例如上一页已从 DOM 中删除，在这种情况下data-rel="back"将不起作用。如果上一页不存在，您将无法返回。还有其他几个因素也会影响此功能。
您可以采取什么措施来解决这个问题：
给这个按钮一个类名，甚至一个 id。之后将一个点击事件绑定到它（vclick 更好，因为它和 tap 一样快，没有 300 毫秒的延迟，并且可以在桌面和移动浏览器上运行），并在每次单击此按钮时添加控制台输出。所以你会这样做：
Run Code Online (Sandbox Code Playgroud)$(document).on('vclick', '#button-ID-goes-here', function(){ console.log('Problematic button'); });这样您就可以测试按钮是否被单击。
接下来的事情有点复杂。您从未发布过您的页面 HTML，但查看您的页面图像，我认为您正在使用正确的 jQuery Mobile 范例，基本上您正在使用data-role="page" div 容器作为页面容器。您会惊讶地发现有多少 jQuery Mobile 开发人员不知道/不明白如果他们想要一个合适的 jQuery Mobile 应用程序，他们需要/必须拥有它。
看一下在其标题中包含此按钮的页面。将pagebeforeshow事件绑定到该页面并监视它是否会触发，如果触发，您可以使用它来显示上一页和下一页。
工作示例： http: //jsfiddle.net/Gajotres/vds2U/72/
Run Code Online (Sandbox Code Playgroud)$(document).on('pagebeforeshow', '.ui-page',function (e, data) { alert("Previous page : " + data.prevPage.attr('id') + " - Next page: " + $.mobile.activePage.attr('id')); });使用此解决方案检查下一页是否正确以及是否存在。如果当您单击后退按钮时没有触发此页面事件，则说明发生了错误。
使用下一个代码作为解决方法。基本上使用页面事件并记住您的上一页。因为您当前正在使用后退按钮，所以该解决方案在这里是可行的。我们将使用 pagebeforeshow 事件来查找上一页，我们将其存储到一些 JavaScript 对象中（它将在页面转换之间持续存在）。
工作示例： http: //jsfiddle.net/Gajotres/vds2U/73/
Run Code Online (Sandbox Code Playgroud)$(document).on('pagebeforeshow', '#second',function (e, data) { pageHandler.prevPage = data.prevPage.attr('id'); $(document).on('click', '#custom-back-button',function () { $.mobile.changePage( "#"+pageHandler.prevPage); }); }); var pageHandler = { prevPage : null }这是data-rel="back"页面处理的完整自定义解决方案。