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

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()which 允许您停止将事件冒泡到父 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();
      }    
   });    
});