Как поймать событие нажатия кнопки внутри WinJs ListView?

Задача

Поймать события клика по картинке, находящейся внутри ListView, без вызова события iteminvoked самого списка.

Решение

Рассмотрим на примере:

Шаг 1

<div id="itemsListTemplate" data-win-control="WinJS.Binding.Template">
	<div>
		<img src="#" data-win-bind="alt: title; src: picture" />
		<div>
			<h4 data-win-bind="innerText: title"></h4>
		</div>
		<div>
			<img id="likeId" src="images/like.png" data-win-bind="alt:title; onclick: clickHandler;" />
		</div>
	</div>
</div>

<div id="userListView"
		data-win-control="WinJS.UI.ListView"
		data-win-options="{
			selectionMode:'single',
			itemTemplate:select('#itemsListTemplate'),
			layout:{type:WinJS.UI.GridLayout}
		}">
</div>

Шаг 2

Теперь создадим источник данных.

var userArray = [
	{
		title: " James Brito",
		picture: "images/JamesBrito.png"
	},
	{
		title: "Alex",
		picture: "images/alex.png"
	},
	{
		title: "Aleph",
		picture: "images/Aleph.png"
	},
	{
		title: "Richard",
		picture: "images/Richard.png"
	}
];

// добавление события сlick
for (var i = 0; i < userArray.length; i++) {
	// http://msdn.microsoft.com/en-us/library/windows/apps/hh967819.aspx
	userArray[i].clickHandler = WinJS.Utilities.markSupportedForProcessing(function (e) {
	
		UserLike(e);
		
	});
}

var userList = new WinJS.Binding.List(userArray),
	userListView = document.getElementById("userListView");
	
if (userListView) {
	userListView.winControl.itemDataSource = userList.dataSource;
}

// пополняется при клике по изображению like.png
function UserLike(e) {
	document.getElementById("like").style.display = "none";
}

Источник

Теги: winjs, windows 8, javascript

Редактировать