我正在尝试在 WinJS (Windows Phone 8.1 UWP) 中的 ListView 上添加上下文菜单。首先,我想通过选择元素并添加事件监听器来添加它。这是我的 HTML 代码:
<div class="friendsTemplate" data-win-control="WinJS.Binding.Template">
<div class="templatecontainer">
<img src="/images/default-avatar.png" />
<div class="itemcontainer">
<div class="itemtitle label-extralarge" data-win-bind="textContent: nickname"></div>
<div class="label-mediummid" data-win-bind="textContent: quotation"></div>
</div>
</div>
</div>
<div id="listView" data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: WinJS.Application.sessionState.friendslist.dataSource,
itemTemplate: select('.friendsTemplate'),
layout: { type: WinJS.UI.ListLayout }
}"></div>
这是我失败的第一个方法:
var myList = document.querySelectorAll('.templatecontainer');
for(var i = 0; i < myList.length; i++) {
myList[i].addEventListener('contextmenu', function(e) {
// code for context menu
}
}
但是 myList 是空的。然后我尝试了不同的方法:
var myList = document.getElementById('listView');
myList.addEventListener('contextmenu', function (e) {
console.log(e.srcElement.getElementsByClassName('templatecontainer'));
});
我手动检查了函数中的 e。数据就在那里!带有类名的元素就在那里!
我不知道发生了什么。如何在 JavaScript 中为每个项目的 listView 创建上下文菜单?
最佳答案
几小时后我终于找到了解决方案。这样我就可以获得列表中项目的索引及其昵称。这些对于我的情况来说已经足够了。谢谢!
document.getElementById('listView').winControl.addEventListener('contextmenu', function () {
var index = document.getElementById('listView').winControl.currentItem.index;
var selectedItem = document.getElementById('listView').winControl.elementFromIndex(index);
var nickname = selectedItem.getElementsByClassName('nickname')[0].innerText;
})
关于javascript - 如何访问listViews项目? (WinJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34703689/