Javascript 除第二个td外，在tr上设置onClick

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

使用和选择器

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

普通（但“现代”）JavaScript解决方案：

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

var-tds=document.querySelectorAll（“tr.designedtablettr-td:not（：第n个类型（2））”；
var len=tds.长度；
对于（变量i=0；i

jsFIDLE:

您可以这样做：

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
    }
}

在这里演奏小提琴：

---

希望有帮助。

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

// 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());
});

---

jsiddle:

如果您使用的是jQuery，那么答案1就可以了。如果您使用支持

querySelectorAll

的现代浏览器，则答案2是可以的

第二种方法还有一个缺点：它将事件侦听器分配给所有的

，这是一种非常繁重的方法。您第一次尝试将事件处理程序仅放在

上实际上更轻（顺便说一句，这称为事件委派），但是还有一个缺点：您必须过滤掉正确的元素

因此，如果您想坚持使用跨浏览器“香草javaScript”，您可能需要尝试以下方法：

首先将

this

和

event

作为函数调用的参数：

onclick=“OpenAdPreview（event，this）”

，然后将函数

OpenAdPreview

更改为：

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

that

提供了

，您可以使用

getElementsByTagName

查找所有

td

s，然后过滤掉

另一种（也是更好的）方法是为

td

分配一个类名，你不想点击它然后过滤：

，然后在你的代码中：

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
    }
}

if（“”+elm.className+“”）.indexOf（'dont-touch-me'）<0{。。。

这样你就不会让你的代码依赖于你的布局，然后总是保存来更改你的HTML标记的类名，你的代码仍然可以正常工作

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

顺便说一句：内联事件不是一个好方法。请尝试使用传统的事件处理程序分配，如

.addEventListener

、

.attachEvent

或

jQuery.on（）

事件处理。这样，您也不必为

这个

、

那个

和

事件

而烦恼

---

添加了一个JSFIDLE:

如果您使用jQuery，首先您可能希望坚持使用事件委派，因为它更轻量级，其次，您希望将HTML与javaScript代码分开，这意味着：如果您决定改变布局，那么您的第二个

现在应该可以单击，而不是第三个和第三个如果你是第七个…那么你就必须改变你的密码

如果您将类分配给

，那么您只需更改HTML即可，代码将按预期工作

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

因此，事件（并且只有一个）位于

上，而

.on

的第二个参数是您的筛选器。这称为事件委派

jshiddle:

另一种方法

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

---

最佳答案！为什么不将此作为此问题的答案？

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

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