通过a连接方式删除数据的确认删除效果的实现

标题可能说的有点绕，场景是我们经常会有一些数据列表，数据会有删除的操作，很多的时候，我们的删除是通过a连接的方式实现的，通过a传递一个id值之类的主键，比如我这里有一个示例：

我这里的删除操作，是通过a连接传递给路由，带有该条数据的id来实现的。

实现删除的操作不难实现，获取到了id值，执行相应的sql语句就可以了，但功能完成后总觉着少了点什么。对了，就是数据直接删除了，有的时候我们并不是想删除这条数据，而是由于操作疏忽，误点了删除按钮，如果这个时候我们添加一步确认的操作，用户体验就会更好了，也能更好的保护我们的数据。

想到了方案后，就直接实现吧，暂时不考虑界面的美观，就直接使用js原生的confirm吧。confirm是一个确认弹窗，有一个取消和确认的操作，相应的该操作有一个返回值，点击了取消，返回值为false，点击了确认，返回值为true。了解到这里就可以了，就满足我们的需求了，在点击按钮的时候，添加一步操作，弹出确认弹窗，然后根据确认弹窗操作的返回值来确定是否要删除数据。直接来上代码：

$(".btn-del").click(function(e){
    var confirmResult = confirm("确认要删除吗？");
    if(!confirmResult){
      e.preventDefault();
    }
  });

这是js实现的最原始的方式，可能不同的浏览器会有不同的展示效果，如果对界面要求不高，这完全可以满足需求了，如果对界面要求高，可以自定义UI，思路get到了就可以了，关键点就是点击取消的时候，阻止a的默认操作，不让它有跳转，删除数据的路由跳转不过去，那么删除数据的操作也就不能实现了，就阻止了删除的操作。