如何編寫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);