嵌套html元素中的onClick事件[重复]答案

【问题标题】：onClick events in nested html elements [duplicate]嵌套html元素中的onClick事件[重复]
【发布时间】：2013-12-21 20:15:08
【问题描述】：

我有这样的结构：

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

我的问题是doSomeStuff() 总是执行，无论我点击<a href> 元素。

我该如何解决这个问题？

【问题讨论】：

您希望 doSomeStuff() 何时执行？
当我点击空间时。
谢谢大家，我在重复的帖子中找到了答案 - $('td > a').click(function(e) { e.stopPropagation(); })
确保它适用于所有浏览器 - 我之前遇到过与 IE 不同的行为，这需要另一种禁用“冒泡”的方法。您可以在 Turning it off 下阅读它：quirksmode.org/js/events_order.html

【解决方案1】：

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

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

HTML

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

【讨论】：

html里面的事件是什么？

【解决方案2】：

通过使用 JQuery

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

JQuery 代码

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

【讨论】：