1

我正在阅读“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>
4

1 回答 1

0

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

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

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

于 2013-02-01T21:47:25.607 回答