Question

晚上的家伙，我有一个问题，其中包含<td>标记和<p>标记，都有onclick事件，这是<p> onclick的教科书情况运行<td> onclick而不是自己的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);

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

2 个答案: