Нажмите кнопку <li>от <ul onclick> - PullRequest
Новая
       27

Нажмите кнопку <li>от <ul onclick>

20 голосов
/ 25 февраля 2011

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

Мне нужно выяснить, какая строка неупорядоченного списка была нажата 

<ul onclick="alert(this.clicked.line.id);">
  <li id=l1>Line 1</li>
  <li id=l2>Line 2</li>
  <li id=l3>Line 3</li>
</ul>

Я не хочу добавлять событие onclick для каждой отдельной строки, я уверен, что должен быть способ ??

Ответы [ 5 ]

39 голосов
/ 25 февраля 2011

Вы можете использовать event.target для этого:

JS: 

// IE does not know about the target attribute. It looks for srcElement
// This function will get the event target in a browser-compatible way
function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('test');
ul.onclick = function(event) {
    var target = getEventTarget(event);
    alert(target.innerHTML);
};

HTML: 

<ul id="test">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Пример: http://jsfiddle.net/ArondeParon/2dEFg/5/

Обратите внимание, что это очень простой пример, и вы, вероятно, столкнетесь с некоторыми проблемами при делегировании событий элементам, содержащим более одного уровня. Когда это произойдет, вам придется пройти по дереву DOM вверх, чтобы найти содержащий элемент.

3 голосов
/ 25 февраля 2011

Объект, который был фактически нажат, - 

event.target

внутри обратного вызова onclick. То, что вы пытаетесь сделать, это хорошая идея, и она известна как делегирование события .

http://jsfiddle.net/VhfEh/

2 голосов
/ 20 апреля 2017

// Самый простой способ сделать это - добавить параметр запроса в ваши ссылки: 

<ul>
 <li><a href="Line 1">Line 1</a></li>
 <li><a href="Line 2">Line 2</a></li>
 <li><a href="Line 3">Line 3</a></li>
</ul>
2 голосов
/ 29 июня 2016

Вы можете использовать event.target для этого:

Не похоже, что он работает, поэтому я сделал небольшое изменение, похоже, работает сейчас. 

var ul = document.getElementById('test');
ul.onclick = function(event) {
    var target = event.target;
    alert(event.target.innerHTML);
};
1 голос
/ 05 января 2019

Если вам нужно точное значение элемента, тогда может работать следующий код. Используйте innerText, кроме innerHTML JS: 

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('test');
    ul.onclick = function(event) {
var target = getEventTarget(event);
    alert(target.innerText);
};

HTML: 

<ul id="test">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

...