Metro ： Html5+javascript 通过app bar 打开另个一个页面的问题

Question

app bar 中的buttont 通过如下代码

WinJS.Navigation.navigate("/pages/page1.html");

打开另一个导航页面page1,则”返回“按钮鼠标放上去没变颜色（即：hover没有效果），必须点击一下page1页面才后，button才有反应。

而通过 页面button 打开另个page1,则“返回” hover效果可用。

请问是什么问题导致的？

Answer 1

能否看下你的PageControlNavigator 具体的实现？ 和你的页面的实现？

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Answer 2

本来我以为是我实现上的问题，后来我做了个页面，

1.通过app bar 中的button 和页面中的button 同时打开同一个空的页面，还是会出现一样的问题。

在ready中添加

            document.getElementById("cmdHelp").addEventListener(
                "click", DoClickHelp, false);
            document.getElementById("btnHelp").addEventListener(
                "click", DoClickHelp, false);

调用函数

    function DoClickHelp() {
        WinJS.Navigation.navigate("/pages/help.html");
    }

Answer 3

嗯是这样的，我们可以做个实验，在default.html 中加一个AppBar， 然后一样导航到你的Help.html, 这个时候AppBar没有消失，因为这个AppBar是属于default page的，所以导航好了不会消失。这个时候只要有AppBar在，Back按钮无法响应 hover 效果。为什么，在Debug的时候看下DOM Explorer:

在App Bar显示了之后，有一个 section class为win-appbarclickeater的显示出来，他的范围是整个页面大小，由于他的显示阻止了页面中其他部分的点击。包括按钮的点击以及超连接的，他们的hover效果都没有了，因为鼠标没有直接在他们上方，中间多了一个section。

同样，如果我们将AppBar放回一个 PageControl 之后，点击它导航后，其实default页面的 section class="win-appbarclickeater" 还是display:block  并没有隐藏。所以导致了页面已经导航，但是页面无法直接点击，需要再多点一次让 这个section 消失才行。

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Answer 4

thanks Bob Bao, 

document.getElementById("topAppBar").style.display = 'none';

通过上面的代码可以解决该问题。

但我现在又碰到一个问题，假如导航到Help.html页面后，我在里面增加一个输入框前台代码如下：

<input type="text" id="txtSn" />

我想实现的在输入框输入数据后按“回车”然后后台判断一些逻辑，

但是，我发现在按”回车“时，页面会“回退”到上一页.

Answer 5

那是因为当前焦点 在页面第一个按钮 Back 上。 

请将其移开。

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Answer 6

焦点就在输入框里，按回车会返回上一个页面，但是如果我在页面隐藏一个button控件后，页面就不会后退到前一个页面。

Answer 7

看这篇 http://adamkinney.com/blog/2012/06/18/why-your-winjs-app-may-navigate-back-when-a-textbox-is-in-focus-and-you-hit-enter/ 

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us