Windows应用商店应用程序-javascript-元素变量_Javascript_Microsoft Metro_Windows Store Apps

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

javascript windows-store-apps

Windows应用商店应用程序-javascript-元素变量,javascript,microsoft-metro,windows-store-apps,Javascript,Microsoft Metro,Windows Store Apps,我正在阅读“HTML动画库示例”，注意javascript中没有声明任何元素变量 target1、target2等的变量声明或getelement在哪里？注意上面的严格声明。这是来自Microsoft的示例代码从pointerFeedback.js 从pointerFeedback.html 使用“向上指针”和“向下指针”动画显示点击并单击元素上的反馈。这些动画应该在元素上使用可以与之交互并触发操作的。它们不应用于已禁用的元素或已具有其他反馈的标准web控件上的元素，例如按钮适用

我正在阅读“HTML动画库示例”，注意javascript中没有声明任何元素变量

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

从pointerFeedback.js

从pointerFeedback.html


使用“向上指针”和“向下指针”动画
显示点击并单击元素上的反馈。这些动画应该在元素上使用
可以与之交互并触发操作的。它们不应用于
已禁用的元素或已具有其他反馈的标准web控件上的元素，例如按钮
适用于不同尺寸的元件：
单击或轻触下面的框以查看动画
200像素
100像素
50像素

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

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

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

除了Firefox和IIRC之外，其他浏览器都是如此。

(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);
    }
})();

<!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>