点击表格单元格内的按钮

Question

我有一个表格单元格，它可点击并点击时触发jQuery事件。在这个单元格中，我也有一个按钮，当点击时有另一个jQuery事件。问题是，单击按钮时，单元格和按钮事件都会被触发。

例如：

<script> 
    $(document).ready(function() { 
     $('#cell').click(function() { 
      alert('cell clicked'); 
     });   
     $('#button').click(function() { 
      alert('button clicked'); 
     }); 
    }); 
</script> 

<table> 
    <tr> 
     <td id="cell"> 
      <button id="button">go</button> 
     </td> 
    </tr> 
</table> 

我怎样才能防止电池点击事件单击按钮时被解雇？

Answer 1

您可以使用stopPropagation()，它允许您停止将事件冒泡到父dom。

例

$('#button').click(function (e) { 
    e.stopPropagation(); 
    alert('button clicked'); 
}); 

的table宽度设定为100%并进行测试。

测试代码

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 

    $(function() 
    { 
     $('#cell').click(function() { 
      alert('cell clicked'); 
     });   
     $('#button').click(function (e) { 
      e.stopPropagation(); 
      alert('button clicked'); 
     }); 
    }); 

</script> 
<table width="100%"> 
    <tr> 
     <td id="cell"> 
      <button id="button">go</button> 
     </td> 
    </tr> 
</table> 

Answer 2

停止event propagation被称为event bubbling to the parent：

$('#button').click(function (e) { 
     e.stopPropagation(); 
     alert('button clicked'); 
    }); 

Answer 3

您需要使用

stopPropagation 

这个例子应该修复它：

$(document).ready(function() { 
    $('#cell').click(function() { 
     alert('cell clicked'); 
    });   
    $('#button').click(function (e) { 
     e.stopPropagation(); 
     alert('button clicked'); 
    }); 
}); 

这应该解决它。

Answer 4

$(document).ready(function(){ 
    $('#cell').click(function(event){ 
    if($(event.target).is('#button')){ 
     event.stopPropagation(); 
     }  
    });  
});