表中的 JavaScript 问题

Question

我有一个来自数据库的结果表，然后我有以下 JavaScript，它允许用户单击表行，然后将它们带到正确的记录。

var pathName = window.location.pathname;

$('table tr').click(function(event) {
    var modelId = $('section').attr('data-id');
    var dataType = $(this).attr('data-type');
    var id = $(this).attr('data-id');

    if(pathName === '/accounts/' + modelId) {
        if(dataType === 'contact') {
            pathName = '/contacts';
        } else if(dataType === 'note') {
            pathName = '/notes';
        } else if(dataType === 'opportunity') {
            pathName = '/opportunities';
        }
    } else if(pathName === '/contacts/' + modelId) {
        if(dataType === 'note') {
            pathName = '/notes';
        } else if(dataType === 'opportunity') {
            pathName = '/opportunities';
        }
    } else if(pathName === '/events/' + modelId) {
        pathName = '/delegates';
    }

    var showUrl = pathName + '/' + id;

    if(id === undefined) {
        event.preventDefault();
    } else {
        window.location = showUrl;
    }
});

效果很好，除了在每个表行中，我都有一个带有删除记录按钮的表单，单击该按钮会弹出一个弹出窗口。不幸的是，因为现在可以单击表格行以将用户带到正确的记录，如果他们单击删除按钮，它会尝试显示弹出窗口，但随后会快速重定向到记录显示 View 。

我认为这可能可以通过 CSS 解决，但我已经尝试过 position: relative;和 z-indexing 无济于事。

谁能指出我正确的方向？

Answer 1

在表单按钮的点击事件中编写这段代码。

e.stopPropagation();

它将阻止事件冒泡到父级。