点击表格内删除图片时，如何阻止父行点击事件触发？

现有HTML结构如下：

<div id="sequenced" class="pane overflow-auto">
    <table id="sequenced-railcars" class="table table">
        <tbody>
            <tr>
                <td class="railcar-sequence">1</td>
                <td class="railcar-number">ABCD123456</td>
                <td class="remove-sequence">
                    <img src="~/images/delete.png" title="Unsequence" role="button" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

对应的事件处理代码：

// Handle table row clicks
$('#sequenced-railcars').on('click', 'tr', function () {
    var $rows = $('#sequenced-railcars tr');
    $rows.removeClass('target-row');
    $(this).addClass('target-row');
});

// Handle image clicks
$('#sequenced').on('click', '.remove-sequence img', function () {
    var $row = $(this).closest('tr');
    var railcar = { id: $row.data('id'), number: $row.find('.railcar-number').text() };
    if (railcar.id != undefined) {
        unsequenceRailcar(railcar);
        $row.remove();
        resetTarget();
    }
});

当前点击删除图片时，会先触发父行的点击事件，需要实现点击图片时不执行行点击的逻辑。

问题根源是DOM事件冒泡：点击图片后，事件会向上传播到父元素（包括<tr>），导致行的点击事件被触发。只需在图片的点击事件中阻止事件冒泡即可。

修改图片点击的事件处理函数，添加event参数并调用event.stopPropagation()：

// Handle image clicks
$('#sequenced').on('click', '.remove-sequence img', function (event) {
    // 阻止事件向上冒泡，避免触发父行的点击事件
    event.stopPropagation();
    
    var $row = $(this).closest('tr');
    var railcar = { id: $row.data('id'), number: $row.find('.railcar-number').text() };
    if (railcar.id != undefined) {
        unsequenceRailcar(railcar);
        $row.remove();
        resetTarget();
    }
});

这样点击图片时，事件只会在图片的处理函数中执行，不会传播到父行，也就不会触发行的点击逻辑。

内容的提问来源于stack exchange，提问作者Jonathan Wood