3

我正在尝试在 HTML 表中的 TR 中单击该元素。如果我单击 TR 内的 Select 输入，则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. 有没有办法在移动网络浏览器上获取原始目标？

4

2 回答 2

3

您实际上并没有说出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);
});

...然后你点击文本“点击我”，你会看到

强的

...在控制台中。

旁注：closest如果您想知道单击了哪个单元格或行，则使用它很方便，例如：

var $td = $(e.target).closest('td');
于 2013-09-11T07:08:50.410 回答
0

要正确理解，您需要了解 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);
}
于 2013-09-11T07:44:42.880 回答