javascript - 如何在 WinJS ListView 中手动触发 oniteminvoked

Question

我有一个 WinJS ListView，它的项目是使用模板函数创建的(itemTemplate 选项指向一个函数)。返回的项目内部有一个 div，该 div 具有 win-interactive 类，以便它可以接受输入。具体来说，该 div 需要能够滚动以显示更多适合 ListView 项目的内容。

滚动与应用于 div 的 win-interactive 类完美配合。我试图解决的问题是允许正常单击(鼠标向下、鼠标向上)仍然触发 ListView 上的 oniteminvoked 事件，同时仍然允许滚动 ListView 项内的 div。

我认为这很简单:我可以使用 win-interactive 类将单击事件监听器绑定(bind)到 div，然后简单地将单击事件传递到 ListView 项上的另一个元素，确保最终触发 oniteminvoked 事件。

我已将点击监听器绑定(bind)到 win-interactive div，并且它按预期触发。但是，我无法弄清楚如何在 ListView 项目的另一部分上触发单击/项目调用。我尝试使用事件 (currentTarget) 的属性来获取父元素或同级元素并在它们上触发事件，但我根本不知道如何在像 event.currentTarget 这样的元素上触发事件>.

tl；博士:如何允许在 ListView 项目内滚动，同时仍允许正常单击触发项目调用？

Answer 1

总的来说，ListView 只是通过将点击传递给您为控件注册的任何 itemInvoked 处理程序来处理点击。这意味着您应该能够绕过整个链并使用适当的项目索引直接调用处理程序，这很容易获得。

在项目的点击处理程序中，如果您手边有 ListView 对象，则 list.currentItem 将是具有焦点的项目(显然是单击的项目)，其索引属性将是通常传递给 itemInvoked 的内容。这样，您就可以直接调用 itemInvoked 处理程序，构建适当的事件对象，或者您可以将处理程序的代码分离到另一个方法中并调用该方法。

作为一个基本示例，从网格应用程序模板项目开始，我将 win-interactive 添加到 pages/groupedItems/groupedItems.html 中的 item-title 元素(可以是任何其他类似滚动区域的元素):

<h4 class="item-title win-interactive" data-win-bind="textContent: title"></h4>

在pages/groupedItems/groupedItems.js的ready方法中，我将ListView的对象附加到页面控件以供以后使用:

var listElement = element.querySelector(".groupeditemslist");
var list = listElement.winControl;
this._list = list;

然后将点击监听器连接到 item-title 元素，如下所示。我这样做是因为项目是通过模板创建的；如果您有项目渲染功能，那么您可以直接在该代码段中添加监听器。

var that = this;

list.addEventListener("loadingstatechanged", function () {
    if (list.loadingState == "complete") {
        var interactives = element.getElementsByClassName("item-title");

        for (var i = 0; i < interactives.length; i++) {
            interactives[i].addEventListener("click", that._itemClick.bind(that));
        }
    }
});

我的页面控件中 _itemClick 的实现如下所示:

_itemClick: function (e) {
    var item = this._list.currentItem;

    //Can also get the index this way
    var index = this._list.indexOfElement(e.currentTarget);

    this._itemInvoked({"detail" : { itemIndex : item.index} })
},

其中 this._itemInvoked 与模板附带的处理程序相同。

请注意，使用 win-interactive，对于执行小型向下/向上动画的项目，您不会获得通常的 pointerDown/pointerUp 行为，因此如果您认为重要的话，您可能也希望包含这些行为(使用 WinJS.UI .Animation.pointerDown/pointerUp 方法来实现效果)。

最后，可能可以从 _itemClick 内的 e.currentTarget 元素沿着链向上，并在相应的父元素上模拟单击事件，但我认为这比在这里跟踪执行所有操作的 WinJS 代码更麻烦。那。更直接地调用您自己的 itemInvoked。