Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

「确认删除?」的设计

  业务代码中经常需要给用户提供某些东西的「删除」操作。而「删除」是个有风险的操作,如果没有任何提示就可以删除,很可能出现错误操作无法挽救的情况。所以对于像删除这样的关键操作又经常被设计成弹出「确认删除」对话框的的情况,但这样的体验确实很差!
  如果没有「确认删除」就很可能造成误删,而要是每个删除都向用户确认,用户也会觉得烦。所以一种古老的解决方案是在一个页面中只有首次删除成功前才会弹出「确认删除」之后就不需要再次确认。这个做法确实是很有效的: <ul>
  <li>Item 1<a href="JavaScript:">[删除]</a></li>
  <li>Item 2<a href="JavaScript:">[删除]</a></li>
  <li>Item 3<a href="JavaScript:">[删除]</a></li>
</ul>
<script>
var hasConfirmed=false;
var ul=document.querySelector("ul");
ul.onclick=function(e){
  if(e.target.tagName=="A"){
    if(hasConfirmed||confirm("确定删除")){
      hasConfirmed=true;
      ul.removeChild(e.target.parentNode);
    };
  };
};
</script>
  其实比起这种做法我更希望 Github 上的那种。弹出对话框无论如何都是比较差的体验,而 Github 的做法是给用户「后悔药」吃。当用户点击删除按钮后并不直接删除,而是将记录标记为「将要删除」,这个动作是可以撤销的。只有当用户离开当前页面时才真正发起删除请求。这样删除操作就变得更安全,也不会因为对话框弹出使用户反感了。下面是演示代码,不要吐槽这个代码烂。确实代码中不该用文案作为判断依据,应该用 className 或 dataset,这里只是随手写的演示代码,懒得去写 class、style 什么的而已。 <ul>
  <li>Item 1<a href="JavaScript:">[删除]</a></li>
  <li>Item 2<a href="JavaScript:">[删除]</a></li>
  <li>Item 3<a href="JavaScript:">[删除]</a></li>
</ul>
<script>
var hasConfirmed=false;
var ul=document.querySelector("ul");
ul.onclick=function(e){
  if(e.target.tagName!="A")return;
  var a=e.target;
  if(a.textContent=="[删除]"){
    a.textContent="[后悔]";
  }else{
    a.textContent="[删除]";
  };
};
onbeforeunload=function(){
  var children=ul.children;
  for(var i=0;i<children.length;i++){
    var li=children[i];
    if(li.lastChild.textContent=="[后悔]"){
      console.log("删除",li.firstChild.data);
    };
  };
};
</script>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^