Как узнать элемент, нажатый в таблице?

Question

Я пытаюсь получить элемент, нажатый в TR в таблице HTML. Если я нажимаю на вкладку «Выбор» внутри поля TR, CurrentTarget возвращает «TR», а OriginalTarget возвращает «SELECT».

Это мой HTML:

<table id="0" class="tableEdit"> 
    <thead> 
     <tr> 
      <th name="id"></th> 
      <th name="name">Descripción Registro</th> 
      <th name="select">Fecha</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1651</td> 
      <td>Name</td> 
      <td> 
       <select name="selectName"> 
        <option value="1">1</option> 
        <option value="2">2</option> 
       </select> 
      </td> 
     </tr> 
    </tbody> 
</table> 

И это мой код:

  //trb is each TR element of the line 
    $(trb).click(function(elem){ 
     if (elem.currentTarget && elem.currentTarget.tagName.toLowerCase() === "tr" && !isInput(elem.originalTarget)){ 
      if (editableRow){ 
       var rowTrigger = editableRow.find("button").get(); 
       $.editRow(rowTrigger,$.tableEditor.vault.getTableID($("#" + id))); 
      } 
    }); 

Этот код работает отлично на моем веб-браузере, но не на мобильных устройствах, так OriginalTarget возвращается undefined. Есть ли способ получить исходную цель в мобильном веб-браузере?

Answer 1

Вы на самом деле не сказали, что такое trb, но похоже, что это может быть набор элементов tr в вашем столе.

Что вы ищете, это elem.target. Это самый верхний элемент, который был нажат, тот, который инициировал событие. (FWIW, я бы не назвал аргумент, передаваемый в обработчик события elem, что это событие , а не элемент.)

Например, если у вас есть:

<table> 
<tbody> 
<tr> 
<td><span><strong>Click me</strong></span></td> 
</tr> 
</tbody> 
</table> 

... и это:

$("tr").click(function(e) { 
    console.log(e.target.tagName); 
}); 

... и нажмите на текст "жми меня," вы увидите

STRONG

... в консоли.

---

Side Примечание: Это удобно использовать closest с этим, если вы хотите знать, что ячейка или строка была нажата, например .:

var $td = $(e.target).closest('td'); 

Answer 2

Чтобы правильно понять, что нужно знать основы JavaScript.

большинство браузера особенно современные, такие как мобильный стандарт использования Javascript как:

element.addEventListener //to add Event Handlers 
//those eventListeners return always the event as first parameter 
//and this event contains the target which can be called with 
event.target 

но старые браузеры или Internet Explorer использует различные способы для достижения этой цели

attachEvent //to add eventListener 
// the event needs to be called with 
window.event 
// and the target is called 
event.srcElement 

зная, что вы можете написать Функция:

//addEvent checks if addEventListener exists else it uses attachEvnet 
//as you can see attachEvent also has only 2 parameters and needs a 'on' 
//before the event name 
function addEvent(a,e,f){//Element,Event,Function(the actual eventHandler) 
window.addEventListener?a.addEventListener(e,f,false):a.attachEvent('on'+e,f); 
} 

//handler handles in this case the click event 
//it checks if the first parameter is event else it uses the window.event 
//it checks if inside the event exists a event.target else event.srcElement 
//then it loops through the parentNode until it finds(this case) the TR Element 
//and just to test it alerts the content of it 
//if you want to get the TD element replace e.target.parentNode with e.target 
//and TR with TD 
// so you get the proper row or column clicked. 
function handler(e){ 
e=e||window.event; 
e.target=e.target||e.srcElement; 
var x=e.target.parentNode; 
while(x.nodeName!='TR'){//or x.localName but thats lowercase 'tr' 
    x=x.parentNode; 
} 
alert(x.innerHTML); 
} 

//when the page loads it it searches for the first table (note the [0]) 
//and adds a eventListener to the whole table. 
//this allows you to have one eventListener on the full table but 
//control every single row or column. 
window.onload=function(){ 
var table=document.getElementsByTagName('table')[0]; 
addEvent(table,'click',handler); 
} 

вот почему jQuery существует. .., чтобы избежать всех этих двойных проверок.

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

Так что для мобильных устройств я использую:

function handler(e){ 
var x=e.target; 
while(x.nodeName!='TR'){ 
    x=x.parentNode; 
} 
console.log(x.innerHTML); 
} 
window.onload=function(){ 
var table=document.getElementsByTagName('table')[0]; 
table.addEventListener('click',handler,false); 
}