如何点击模态框按钮时取消JavaScript的window.location跳转？

核心原因 #

你之前用e.preventDefault()无效，是因为行的跳转是通过自定义window.location实现的非浏览器默认行为，这个方法只能阻止链接跳转、表单提交这类浏览器自带的默认动作，管不到自定义的JS逻辑。而按钮点击后事件会向上冒泡到<tr>，触发行的跳转代码，这才是问题根源。

方案一：阻止按钮事件冒泡 #

直接给按钮绑定点击事件，阻止事件冒泡到父级<tr>，这样行的跳转逻辑就不会被触发：

// 行的跳转绑定（假设你原代码是这样）
$('.clickable-row').on('click', function() {
  window.location = $(this).data('href');
});

// 按钮的点击事件，阻止冒泡
$(document).on('click', '.delete-record', function(e) {
  e.stopPropagation(); // 关键：阻止事件向上传递到<tr>
  // 这里写打开模态框的逻辑
});

方案二：在行的跳转逻辑里做判断 #

如果不想修改按钮的事件绑定，可以在行的点击事件中，判断点击的目标是不是按钮或按钮的子元素，是的话就跳过跳转：

$('.clickable-row').on('click', function(e) {
  // 检查点击目标是否属于.delete-record按钮
  if ($(e.target).closest('.delete-record').length > 0) {
    return; // 跳过跳转逻辑
  }
  window.location = $(this).data('href');
});

为什么之前的CSS方法不行 #

给单元格加pointer-events: none会让整个单元格（包括里面的按钮）都失去点击交互能力，自然无法触发按钮的模态框逻辑，所以这种方法不可取。

内容的提问来源于stack exchange，提问作者Carlo Meatman