<div class="tag">
<a href="#">qwerty</a>
<a href="#">qwerty</a>
<a href="#">qwerty</a>
<a href="#">qwerty</a>
</div>
<script>
(function(){
var wrapper = document.getElementsByClassName('tag')[0];
var tags = Array.prototype.slice.call(wrapper.getElementsByTagName('a'));
wrapper.onclick = function(event) {
var index = tags.indexOf(event.target);
if (index !== -1) {
alert(index);
event.preventDefault();
}
};
})();
</script>
либо ваш вариант, исправленный:
<div class="tag">
<a href="#">qwerty</a>
<a href="#">qwerty</a>
<a href="#">qwerty</a>
<a href="#">qwerty</a>
</div>
<script>
(function(){
var wrapper = document.getElementsByClassName('tag')[0];
var tags = wrapper.getElementsByTagName('a');
for (var i = 0; i < tags.length; i ++) {
tags[i].onclick = (function(i) {
return function(event) { alert(i) };
})(i);
}
})();
</script>