jQuery confirm与原生JS confirm差异：原生版本无法阻止删除操作

这其实是原生JS和jQuery对事件处理函数返回值的处理机制差异导致的，你的原生JS代码确实存在逻辑漏洞，而jQuery帮你做了封装处理。

问题根源分析 #

先看两者的核心差异：

• jQuery的on('click')处理：当你在jQuery的点击事件回调里返回false（或者返回confirm()的结果，当用户点取消时confirm返回false），jQuery内部会自动执行两个关键操作：

  1. 调用event.preventDefault()阻止元素的默认行为（比如提交表单、跳转链接这类触发删除的动作）
  2. 调用event.stopPropagation()阻止事件冒泡
     所以jQuery版本能轻松阻止后续的删除逻辑。

• 原生JS的addEventListener处理：用DOM2级事件绑定（addEventListener）时，回调函数的返回值不会自动触发任何默认行为的阻止——哪怕你return false也没用。你代码里的return confirm(...)只是把结果返回给了事件系统，但原生系统不会根据这个返回值去阻止默认动作，所以哪怕用户点了取消，默认的删除行为还是会执行。

修复原生JS代码的两种方法 #

方法一：手动阻止默认行为（推荐）

直接判断confirm的结果，如果用户取消，就调用e.preventDefault()阻止默认行为：

var elems = document.querySelectorAll('.confirmation'); 
elems.forEach(element => { 
  element.addEventListener('click', function(e) { 
    // 如果用户点击取消，confirm返回false，执行阻止操作
    if (!confirm('Are you sure you want to delete it?')) {
      e.preventDefault();
      // 如果需要阻止事件冒泡，可以加上这一行
      // e.stopPropagation();
    }
  }); 
});

方法二：使用DOM0级事件绑定（不推荐，但能体现差异）

如果你用DOM0级的onclick绑定事件，返回值会被原生系统识别，从而阻止默认行为：

var elems = document.querySelectorAll('.confirmation'); 
elems.forEach(element => { 
  element.onclick = function() { 
    return confirm('Are you sure you want to delete it?'); 
  }; 
});

不过这种方式不推荐，因为DOM0级事件无法绑定多个同类型的事件，会覆盖之前的绑定，灵活性远不如addEventListener。

总结 #

不是原生JS本身有问题，而是它的事件处理机制更底层，需要你手动处理默认行为的阻止；而jQuery对事件系统做了封装，简化了这类常见操作。只要在原生代码里手动调用e.preventDefault()，就能实现和jQuery版本一样的效果。

内容的提问来源于stack exchange，提问作者Alex Ironside