Windows Store 应用程序中的 Javascript 使用答案

【问题标题】：Javascript usage in Windows Store AppWindows Store 应用程序中的 Javascript 使用
【发布时间】：2014-01-04 10:44:25
【问题描述】：

我正在努力使用 Metro 风格的应用程序。这是基本场景：按下主屏幕上的按钮后，您跳转到另一个页面。然后我动态创建部分 html 内容。例如：

<img id="bbb" src="/images/1.jpg">
<img id="ccc" src="/images/2.jpg">
<img id="ddd" src="/images/3.jpg">

然后我想将 JS 函数附加到我添加的每个 img 标签的“点击”事件中。所以我做了这样的事情：

(function () {
"use strict";
WinJS.UI.Pages.define("/pages/myPage/myPage.html", {
    ready: function (element, options) {
        element.querySelector("#bbb").onclick = this.button1Click("ff");
        element.querySelector("#ccc").onclick = this.button1Click("ee");
        element.querySelector("#ddd").onclick = this.button1Click("dd");
    },
    button1Click : function (arg)
    {
        console.log(arg);
    }
});

})();

当然部分：

element.querySelector("#bbb").onclick = this.button1Click("ff");

正在循环中。

但是这种附件功能在加载后执行一次（即使没有点击）并消失。我在调试模式下检查了它，并且在加载每个元素的 onclick 属性后立即具有空值。使用这种方法：

element.querySelector("#bbb").addEventListener("click", this.button1Click("ff"), false);

还有其他组合，比如

document.getElementById("bbb").addEventListener("click", this.button1Click("ff"), false);

等等。给出相同的结果。感谢您的帮助。

【问题讨论】：

标签： javascript html windows-store-apps windows-8.1

【解决方案1】：

我认为您需要删除 onClick 函数的括号，因为这将立即调用该函数（如您所见）

从此：

ready: function (element, options) {
    element.querySelector("#bbb").onclick = this.button1Click("ff");
    element.querySelector("#ccc").onclick = this.button1Click("ee");
    element.querySelector("#ddd").onclick = this.button1Click("dd");
},

对此：

ready: function (element, options) {
    element.querySelector("#bbb").onclick = this.button1Click;
    element.querySelector("#ccc").onclick = this.button1Click;
    element.querySelector("#ddd").onclick = this.button1Click;
},

然后您需要将 args 放入您的 click 函数中，也许将其绑定到 html 本身。可能有办法同时绑定函数args，但是我对WinJS不是很熟悉。

HTML

<img id="bbb" src="/images/1.jpg" data-arg="ff">

JS

function button1Click() {
    // Get the clicked element
    // JQuery solution
    var arg = $(this).data('arg');
    console.log(arg)
}

此外，您可以稍微简化一下，为您的 HTML 使用类而不是 ID，并分配一次 onClick 处理程序。

【讨论】：