Question

我刚刚使用html5和JavaScript创建了一个示例网格应用程序。

现在我想要实现的是在用户点击组标题时给出一些动画。

为此，我写了两个函数。一个用于mousedown事件，一个用于鼠标注册事件：

function animateDown() {
    WinJS.UI.Animation.pointerDown(this);
}
function animateUp() {
    WinJS.UI.Animation.pointerUp(this);
}

现在我想将这些函数添加到每个标头的事件侦听器中。有许多组标题，它们没有任何ID，只有类名。

那么如何为所有标题添加eventlistener呢？

Answer 1

您需要使用事件委派。因此，如果所有元素都在容器中，您可以这样做：

function toggle(event) {
   var header = event.target;
   if (header.classList.toggle("open") {
      WinJS.UI.Animation.pointerDown(header);
   } else {
      WinJS.UI.Animation.pointerDown(header);
   }
}

document.querySelectorAll(".container").addEventListener("click", toggle, false);

将事件侦听器添加到metro风格的网格应用程序？

1 个答案: