Javascript jQuery mobile data-rel="back" 链接导致错误的事件被触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7836003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mobile data-rel="back" link causing wrong events to be fired
提问by nisc
Have a look at the test-case
看一下测试用例
When you open the link, pagebeforeshowfor page 1is fired. When you click the link to go to page 2, pagebeforeshowfor page 2is fired. So far, so good.
当您打开链接，pagebeforeshow为第1页被激发。当您单击链接转到第2页，pagebeforeshow为第2页被激发。到现在为止还挺好。
If you then use the left button (data-rel="back") to go back, excess events are fired. Using the right button instead (direct link to page 1) does what I'd expect, namely, only pagebeforeshowfor page 1gets fired.
如果您随后使用左按钮 ( data-rel="back") 返回，则会触发多余的事件。改为使用右键（直接链接到第 1 页）可以满足我的预期，即仅pagebeforeshow针对第 1 页被触发。
pagebeforeshowcan also be replaced with pageshow, doesn't matter. What's happening here?
pagebeforeshow也可以换成pageshow，没关系。这里发生了什么事？
(Tested in up-2-date Chrome)
（在最新版 Chrome 中测试）
Source for reference:
参考来源：
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script>
$('#test1').live('pagebeforeshow', function() {
console.log("=== pagebeforeshow for #test1");
});
$('#test2').live('pagebeforeshow', function() {
console.log("=== pagebeforeshow for #test2");
});
</script>
</head>
<body>
<div data-role="page" id="test1">
<div data-role="header" align="center">
<p>Page 1.</p>
</div><!-- /header -->
<div data-role="content">
<p><a href="#test2">Go to page 2.</a></p>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="test2">
<div data-role="header" align="center">
<a href="/" data-icon="back" data-rel="back">Back</a>
<p>Page 2.</p>
<a href="data-rel-back.html" data-icon="back">Go directly to page 1</a>
</div><!-- /header -->
<div data-role="content">
<p>
Try the two buttons and have a look at the console.<br>
Using the left button (data-rel="back") triggers "too many" events.<br>
The right button does what I'd expect.
</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
采纳答案by nisc
Turns out, this is a bugin Chrome's console.
事实证明，这是Chrome 控制台中的一个错误。
Chromium bugtracker
Chromium漏洞追踪器
回答by pinaldesai
Please change the link to redirect to page 1
请更改链接以重定向到第 1 页
<a href="data-rel-back.html" data-icon="back">Go directly to page 1</a>
should be
应该
<a href="/#test1" data-icon="back">Go directly to page 1</a>
if you find any trouble with this remove forward slash
如果您发现此删除正斜杠有任何问题
<a href="#test1" data-icon="back">Go directly to page 1</a>
回答by Phill Pafford
Live Example
现场示例
Corrected tags in header and back button attributes
更正了标题和后退按钮属性中的标签
<a data-rel="back">Back</a>
jQM adds extra markup when rendering the page, if you use the wrong tags some of the functionality might change, break. I think what was happening for the back button is you also added a href="/" attribute and this might have caused jQM to try to navigate to it as well as going back to the last page causing the issue.
jQM 在渲染页面时会添加额外的标记，如果您使用错误的标记，某些功能可能会更改、中断。我认为后退按钮发生的情况是您还添加了一个 href="/" 属性，这可能导致 jQM 尝试导航到它以及返回导致问题的最后一页。
Also in the header you had used the <p>tag and aligned it center, jQM does this when using the <h1>
同样在标题中，您使用了<p>标签并将其居中对齐，jQM 在使用<h1>
For more on the back button you can always refer to the docs
有关后退按钮的更多信息，您可以随时参考文档
