Question

<tr class="DesignedTableTR" onclick="OpenAdPreview()">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>

我希望除了第二个td之外，所有td-s都会设置onclick。

我知道我可以这样做：

<tr class="DesignedTableTR">
    <td onclick="OpenAdPreview()"></td>
    <td></td>
    <td onclick="OpenAdPreview()"></td>
    <td onclick="OpenAdPreview()"></td>
</tr>

但也许还有另一种有效的方法..

Answer 1

另一种做法

<tr class="DesignedTableTR" onclick="OpenAdPreview()">
<td></td>
<td onclick="event.cancelBubble=true; return false;"></td>
<td></td>
<td></td>

Answer 2

使用:not()和:nth-child()选择器。

$("tr.DesignedTableTR > td:not(:nth-child(2))").on("click", OpenAdPreview);

Answer 3

你可以做到这一点：

// its zero-based so second td would be at 1st index, so bind all td's onclick instead of second td
$("tr.DesignedTableTR > td:not(:eq(1))").on("click",function(){
    alert("clicked :" + $(this).html());
});

在这里工作小提琴：http://jsfiddle.net/5zxun/2/

我希望它有所帮助。

Answer 4

如果您使用 jQuery ，答案1就可以了。如果您使用支持querySelectorAll的'现代'浏览器，则答案2即可。

第二个也有缺点：它为所有<td>分配事件监听器，这是一个非常重的方法。您首次尝试将事件处理程序仅放在<tr>上实际上更轻量级（顺便说一句，这称为事件委派），但也一个小小的一面：你必须过滤掉正确的元素。

因此，如果您想坚持使用跨浏览器' vanilla javaScript '，您可能需要尝试以下操作：

首先将this和event作为参数添加到函数调用中：onclick="OpenAdPreview(event, this)"，然后将函数OpenAdPreview更改为：

function OpenAdPreview(event, that){
    var e = event || window.event,
        elm = e.target || e.srcElement,
        allTDs = that.getElementsByTagName('td');

    while (elm.nodeName.toLowerCase() !== 'td' && elm !== that) {
        elm = elm.parentNode; // get the right element if it's not the td already
    }

    if (elm !== allTDs[1] && elm !== that) { // this filters out your second td
        ... here goes your code
    }
}

that发送<tr>，您可以在其中td查找所有getElementsByTagName，然后过滤掉。

另一种（也是更好的）方法是将类名称分配给您不想点击的td，然后按照<td class="dont-touch-me"></td>进行过滤，然后在您的代码中：

if ((' ' + elm.className + ' ').indexOf('dont-touch-me') < 0) { ...

这样您就不会使代码依赖于您的布局。然后总是保存以更改HTML标记的类名，并且您的代码仍然按预期工作。

顺便说一句： 内联事件 不是一个好方法。尝试坚持传统的事件处理程序分配，例如.addEventListener，.attachEvent或jQuery.on()事件处理。这样，您也不必为this，that和event而烦恼。

添加了一个JSFiddle：http://jsfiddle.net/5zxun/4/

Answer 5

如果您使用jQuery，首先您可能希望坚持使用事件委派，因为它更轻量级，其次，您希望将HTML与javaScript代码分开，这意味着：如果您决定制作你的布局不同，假设你的第二个<td>现在应该是可点击的，但不是你的第3个和你的第7个...那么你必须改变你的代码。

如果您为<td>分配课程，那么您只需更改HTML即可，您的代码也会像预期的那样正常工作。

<tr class="DesignedTableTR">
    <td></td>
    <td class="dont-toch-me"></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="dont-toch-me"></td>
    <td></td>
</tr>

并在您的代码中执行：

$("tr.DesignedTableTR").on("click", "td:not(.dont-toch-me)", function(event){
    // ... here goes your code
});

因此，事件（只有一个）位于<tr>，.on的第二个参数是您的过滤器。这称为事件委派。

JSFiddle：http://jsfiddle.net/5zxun/9/

Answer 6

普通（但＆＃34;现代＆＃34;）JavaScript解决方案：

var tds=document.querySelectorAll("tr.DesignedTableTR td:not(:nth-of-type(2))");
var len = tds.length;
for(var i=0; i< len; i++){
    tds[i].onclick=function(){
        //.. here you go
    }
}

JSFiddle：http://jsfiddle.net/cherniv/5zxun/

Answer 7

您可以使用td的索引值来根据您的需要阻止点击事件。

$(document).ready(function(){
$('tr.DesignedTableTR td').click(function(){
    if($(this).index()==1){
    ev.preventDefault();
        return false;
    }else{
    alert($(this).index());
    //your code here
    }
});
});

JSFiddle：http://jsfiddle.net/5zxun/1/

除了他的第二个td之外，在tr上设置onClick

7 个答案: