Windows 商店应用程序 - javascript - 元素变量答案

【问题标题】：Windows store apps - javascript - element variableWindows 商店应用程序 - javascript - 元素变量
【发布时间】：2013-01-31 20:18:45
【问题描述】：

我正在阅读“HTML 动画库示例”http://code.msdn.microsoft.com/windowsapps/Using-the-Animation-787f3720 并注意到 javascript 中没有声明任何元素变量。

target1、target2等的变量声明或getelement在哪里？注意顶部的严格声明。这是来自 Microsoft 的示例代码。

来自pointerFeedback.js

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/pointerFeedback.html", {
        ready: function (element, options) {
            target1.addEventListener("MSPointerDown", onPointerDown, false);
            target1.addEventListener("MSPointerUp", onPointerUp, false);
            target2.addEventListener("MSPointerDown", onPointerDown, false);
            target2.addEventListener("MSPointerUp", onPointerUp, false);
            target3.addEventListener("MSPointerDown", onPointerDown, false);
            target3.addEventListener("MSPointerUp", onPointerUp, false);
        }
    });

    function onPointerDown(evt) {
        WinJS.UI.Animation.pointerDown(evt.srcElement);
    }

    function onPointerUp(evt) {
        WinJS.UI.Animation.pointerUp(evt.srcElement);
    }
})();

来自pointerFeedback.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="/css/pointerFeedback.css" />
    <script src="/js/pointerFeedback.js"></script>
</head>
<body>
    <div id="input" data-win-control="SdkSample.ScenarioInput">
        <p>Use the Pointer Up and Pointer Down animations to
        show tap and click feedback on elements. These animations should be used on elements
        that can be interacted with and can trigger actions. They should not be used on
        elements that are disabled or on standard web controls that already have other feedback, such as buttons.</p>
    </div>
    <div id="output" data-win-control="SdkSample.ScenarioOutput">
        <div class="example">
            <h3>Applied to different sized elements:</h3>
            <p>Click or tap on the boxes below to see the animation.</p>
            <div id="target1" class="large">
                200 pixels
            </div>
            <div id="target2" class="medium">
                100 pixels
            </div>
            <div id="target3" class="small">
                50 pixels
            </div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript microsoft-metro windows-store-apps

【解决方案1】：

非常有趣的问题！我怀疑每个具有指定“id”的元素都会自动提供给 JavaScript。

我可以通过基于“空白应用”模板创建一个新项目并添加一个 id="foobar" 的新 div 来确认这一点。然后我启动应用程序并切换到 JavaScript 控制台，瞧：'foobar' 变量可用！

在做了几个月的 Win8 应用开发之后，我从来没有遇到过这个问题，干得好！

【讨论】：

除 Firefox、IIRC 之外的所有浏览器都是如此。