如何编写onclick函数以防止冒泡

Question

晚上的家伙，我有一个问题，其中有一个<td>标签和一个<p>标签，都有onclick事件，这是运行<td> onclick而不是它的<p> onclick的教科书情况拥有。 从我在这里和其他地方研究过的我已经了解到这是由冒泡引起的。 然而，显然知道只是成功的一半，因为我似乎无法找到解决此问题的方法。 以下是我目前正在尝试解决它的方法

HTML：

<table>
    <tr>
        <td>
            <p>text</p>
        </td>
    </tr>
</table>

jQuery的：

$(function(){
var show = function(){
    $('#editentry').css({'display': 'block'}); //this is column 3
}
//run var show on click
$('td p').click(function(event){
    show;
    event.stopPropagation();//stop bubbling
});
});//end function

我也试过这个：

$(function(){
var show = function(event){
    $('#editentry').css({'display': 'block'}); //this is column 3
    event.stopPropagation();
}
//run var show on click
     $('td p').click(show);
});//end function

从我的理解这应该工作，抱歉，如果我错过了一些简单的东西，我对jquery有点新，这似乎是一个复杂的主题。 提前致谢 ：）

Answer 1

你有什么应该工作正常。 这正是你使用stopPropagation 。

下面是一个示例，说明如何阻止事件冒泡：

HTML：

<table>
  <tr>
    <td>
        <p>inside paragraph</p> outside paragraph
    </td>
  </tr>
</table>

使用Javascript：

$(function(){

  $('td').click(function(event){
    alert('cell');
  });
  $('td p').click(function(event){
    event.stopPropagation();
    alert('paragraph');
  });
});

演示： http ： //jsfiddle.net/39n5X/

如果单击“内部段落”，它将只显示“段落”消息，如果单击“外部段落”，它将显示“单元格”消息。

Answer 2

尝试用这个替换你的停止冒泡线：

event.preventDefault ? event.preventDefault() : (event.returnValue=false);
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);