javascript - jQuery 确认与普通 JS 确认

Question

这是我的代码。

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

$('.confirmation').on('click', function() {
  return confirm('Are you sure?');
});

它的作用是抓取某些元素并停止在后端运行的delete函数。现在。它适用于 jQuery 版本。它不适用于 Vanilla 版本。在 Vanilla 中，即使我在确认框中单击“取消”，它仍然会删除该字段。另一方面，JQuery 会停止代码。

我在 vanilla JS 中做错了什么，还是 jQuery 在后台有一些“魔法”？

Answer 1

这不是确认，它的工作原理是一样的；这是关于 jQuery 提供的语法糖。这是关键的区别:

Returning false from an event handler (set with jQuery) will automatically call event.stopPropagation() and event.preventDefault().

相反，使用原生API设置的事件监听器则没有此功能。要使用它，您必须稍微修改一下代码:

element.addEventListener('click', function(e) {
  var confirmation = confirm('Are you sure you want to delete it?');
  if (!confirmation) {
    e.stopPropagation();
  }
});

它是 stopPropagation()，而不是 preventDefault()，因为我假设删除代码实际上是另一个使用委托(delegate)技术设置的 click 处理程序在始终存在的父元素上。