我正在尝试在WinJS(Windows Phone 8.1 UWP)中的ListView上添加上下文菜单。首先,我想通过选择元素并添加EventListenter来添加它。这是我的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。数据在那里!具有类名的元素就在那里!
我不知道发生了什么。如何在每个项目的listView中使用JavaScript创建上下文菜单?
答案 0 :(得分:1)
我终于在数小时后找到了解决方案。这样我就可以获得列表中项目的索引及其昵称。这些对我的案件来说足够了。谢谢!
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;
})