Javascript 嵌套html元素中的onClick事件

我有一个这样的结构：

<tr>
 <td onClick="doSomeStuff();">
  <a href="#" onClick="doOtherStuff(1);">1</a>
  <a href="#" onClick="doOtherStuff(2);">1</a>
 </td>
</tr>

我的问题是，

doSomeStuff（）

总是执行，无论我单击的是

元素

如何修复此问题？

使用JQuery

<tr>
 <td>
    <span class="td">
      welcome
      <a href="#" class="a">1</a>
      <a href="#" class="a">2</a>
    </span>
 </td>
</tr>

---

如果您使用的是纯javascript。试试这个

JS

---

HTML

您希望何时执行doSomeStuff（）？当我单击空格时。谢谢各位，我在重复的post-$（'td>a'）中找到了答案。单击（函数（e）{e.stopPropagation（）；}）确保它在所有浏览器上都能工作-我经历了与IE不同的行为，这需要另一种禁用“冒泡”的方法。您可以在这里关闭它下面阅读：html中的事件是什么？

$(function(){
    $(document).on("click",".td",function(){
        alert('td');
    });
    $(document).on("click",".td a",function(e){
        e.stopPropagation();
    });
    $(document).on("click",".a",function(){
        alert($(this).text());
    });
});

function doOtherStuff(event,arg) {
        event.stopPropagation();
}

<tr>
     <td onClick="doSomeStuff();">
            <a href="#" onClick="doOtherStuff(event,1);">1</a>
            <a href="#" onClick="doOtherStuff(event,2);">1</a>
     </td>
</tr>