0

晚上的家伙，我有一个问题，其中有一个<td>标签和一个<p>标签，两者都有 onclick 事件，这是<p>onclick 运行<td>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 有点陌生，这似乎是一个复杂的主题。提前致谢 ：）

4

2 回答 2

2

你所拥有的应该可以正常工作。这正是您使用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/

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

于 2013-03-09T00:47:19.863 回答
0

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

event.preventDefault ? event.preventDefault() : (event.returnValue=false);
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
于 2013-03-09T00:34:59.027 回答