可点击表格单元格内的按钮

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的{​​{1}}：

event bubbling to the parent

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();
      }    
   });    
});