Question

我的WinJS页面中有几个按钮。

<button id="btn1">
  Button 1
</button>
<button id="btn2"">
  button 2
</button>...

和javascript将点击事件添加到点击按钮：

(function () {
    WinJS.UI.processAll().done(function () {
        var showButton = document.querySelector("xxx");
        showButton.addEventListener("click", function () {
        });
    });
})();

如何确定点击了哪个按钮并将“xxx”的值设置为该按钮的id（btn1，btn2等...）

Answer 1

如果我理解正确，当你有多个连接到单个事件处理程序的按钮时，你想要识别按钮（发送者）。

MSDN：

在JavaScript中，Windows运行时事件参数表示为a 单一事件对象。在以下事件处理程序示例中方法，ev参数是包含发送者的对象（目标属性）和其他事件参数。事件参数是为每个事件记录的参数。

因此，您需要为事件处理程序定义一个参数并使用其target属性。假设您有以下HTML：

<div id="label1"/>
<div>
    <button id="button1">Button1</button><br />
    <button id="button2">Button2</button><br />
    <button id="button3">Button3</button><br />
</div>

并将一个事件处理程序附加到所有按钮：

var button1 = document.getElementById("button1");
button1.addEventListener("click", buttonClickHandler);

var button2 = document.getElementById("button2");
button2.addEventListener("click", buttonClickHandler);

var button3 = document.getElementById("button3");
button3.addEventListener("click", buttonClickHandler);

您可以通过以下方式访问发件人：

function buttonClickHandler(eventInfo) {
    var clickedButton = eventInfo.target;
    var label1 = document.getElementById("label1");
    label1.innerHTML = clickedButton.id.toString();
}

Answer 2

这是获取按钮的WinJS解决方案：

var buttons = WinJS.Utilities.query('button');

然后您可以将事件绑定到按钮上：

buttons.forEach(function (btn) {
    btn.addEventListener("click", function () {
        console.log('button ' + this.id + ' has been clicked.');
    })
});

我是WinJS的新手，因此可能有一个更漂亮的解决方案来替换forEach。

Answer 3

这样的事情应该有效。 querySelector仅返回第一个匹配项，因此您需要使用querySelectorAll（see docs）。

var buttons = document.querySelectorAll("button");

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function () {
        var id = this.id;
        // do stuff with "id"
    });
}

您也可以考虑调查jQuery，因为这可以使这样的事情变得更清洁。

如何获取winjs中单击按钮的ID

3 个答案: