嵌套html元素中的onClick事件

时间:2013-12-21 20:15:08

标签: javascript html

我有这样的结构:

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

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

我如何解决这个问题?

2 个答案:

答案 0 :(得分:7)

如果你正在使用普通的javascript。试试这个

JS

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>

答案 1 :(得分:0)

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