Обнаружение узла, который был нажат в javascript

Question

У меня есть несколько интервалов с метками.

<span class="viewEdit">View and edit class one.</span> 
<span class="viewEdit">View and edit class two.</span> 
<span class="viewEdit">View and edit class three.</span> 
<span class="viewEdit">View and edit class four.</span> 
<span class="viewEdit">View and edit class five.</span> 

Я хотел бы создать функцию, которая добавляет «на клик» событие, которое определяет, какой из пролетов была нажата. То есть если первая была нажата первая она будет возвращать «0», то второй «1» ... и т.д.

Я понимаю, что я могу использовать

document.getElementByClassName("viewEdit) 

создать массив, но я не знаю, как чтобы определить, какой из них был нажат.

Я пытался исследовать этот вопрос здесь, но подозреваю, что я неправильно формулирую его, поскольку ничего не могу найти. Извините, если этот решех аналогичного вопроса ответил в другом месте.

Answer 1

Таким образом, это позволит вам найти индекс, по которым щелкнули элемента в коллекции.

var elements = document.getElementsByClassName("viewEdit"); 

for (var i = 0; i < elements.length; i++) { 
    (function (index) { 
     elements[index].addEventListener("click", function() { 
      for (var x = 0; x < elements.length; x++) { 
       if (elements[x] === this) alert(x); 
      } 

     }, false); 
    })(i); 
} 

Это халтура, но должны делать то, что вы спрашиваете, до сих пор ... Here is a fiddle for you.

Answer 2

jsFiddle Demo

Присоединить обработчик щелчка к каждому элементу. При нажатии на ссылку обратного вызова возникает элемент, из-за которого обработчик запускается, а затем делает некоторые выводы о том, что индекс относится к другим элементам.

Внутри обработчика событий this будет ссылаться на элемент, который активировал событие.

Для достижения этой цели, вы можете перемещаться по набору элементов с вашим именем класса

var els = document.getElementsByClassName("viewEdit"); 
var elClicked = {};//a public variable in case you wish to use it. the requirements for storage was vague 
for(var i = 0; i < els.length; i++){ 

А потом внутри итерации, назначить обработчик события, и хранить индекс, который был использован, чтобы вы могли знать, какой номер был нажат (для этого требуется закрытие).

for(var i = 0; i < els.length; i++){ 
(function(local){ 
    els[i].onclick = function(){ 
    elClicked.element = this; 
    elClicked.text = this.innerText; 
    elClicked.index = local; 
    }; 
})(i) 
} 

Answer 3

Обработчик будет передан объект события.

function myHandler(event) { 
    var el = event.target; 
    // Use el here 
} 

event.target будет держать узел, который был щелкнули.

Answer 4

<span class="viewEdit" onclick:"fn(this)">View and edit class one.</span> 
<span class="viewEdit" onclick:"fn(this)">View and edit class two.</span> 
<span class="viewEdit" onclick:"fn(this)">View and edit class three.</span> 
<span class="viewEdit" onclick:"fn(this)">View and edit class four.</span> 
<span class="viewEdit" onclick:"fn(this)">View and edit class five.</span> 

<script type="text/javascript"> 
    function fn(sender){ 
    //add the sender object to your array 
    //or maybe even just the sender's id 
} 
</script> 

Answer 5

Самый простой способ получить родительский узел ваших пролетных элементов, а затем добавить обработчик событий ...
Live Demo

var eles = document.getElementsByClassName("viewEdit"); 

eles[0].parentNode.addEventListener("click", function (e) { 
    // if (e.target.classList.contains("viewEdit")) { 
    if (e.target.nodeName.toLowerCase() === "span") { 
     alert([].indexOf.call(eles, e.target)); 
    } 
}, false); 

Answer 6

Вы можете добавить прослушиватель событий нажмите чтобы document.body, который будет ловить все щелчки, а затем отфильтровать по типу тега и класс элементов. Что-то вроде этого.

Javascript

/*jslint maxerr: 50, indent: 4, browser: true */ 

(function() { 
    "use strict"; 

    function addEvent(elem, event, fn) { 
     if (typeof elem === "string") { 
      elem = document.getElementById(elem); 
     } 

     function listenHandler(e) { 
      var ret = fn.apply(null, arguments); 

      if (ret === false) { 
       e.stopPropagation(); 
       e.preventDefault(); 
      } 

      return ret; 
     } 

     function attachHandler() { 
      window.event.target = window.event.srcElement; 

      var ret = fn.call(elem, window.event); 

      if (ret === false) { 
       window.event.returnValue = false; 
       window.event.cancelBubble = true; 
      } 

      return ret; 
     } 

     if (elem.addEventListener) { 
      elem.addEventListener(event, listenHandler, false); 
     } else { 
      elem.attachEvent("on" + event, attachHandler); 
     } 
    } 

    function whatClicked(e) { 
     var target = e.target; 

     if (target.tagName.toUpperCase() === "SPAN" && /(^|)viewEdit(|$)/.test(target.className)) { 
      console.log(target); 
     } 
    } 

    addEvent(document.body, "click", whatClicked); 
}()); 

На jsfiddle