?前段时间做了一个前端流程设计器，基于jsplumb，可以拖拽。大领导看完表示很满意，同时提出建议，删除台词不符合大众习惯，一般人猜不出来（我双击台词删除），能否支持选中该行然后按Delete键删除该行？最后，第一反应很简单，我只需要获取line对象，然后给它绑定keydown事件，然后判断函数体中的keyCode，然后调用jsplumb的deleteline事件即可。思路很简单，但是自己实际做的时候遇到了很多小细节，导致无法触发事件。接下来，让我们看看我遇到了哪些问题。接到领导要求后，立马花了两分钟写了这么一段代码：this.jsPlumb.bind('keydown',(conn,originalEvent)=>{letevent=originalEvent||window.eventif(event.keyCode===46){this.$confirm('你确定要删除点击的行吗？','Prompt',{confirmButtonText:'OK',cancelButtonText:'Cancel',type:'warning'}).then(()=>{this.jsPlumb.deleteConnection(conn)console.log(originalEvent)}).catch(()=>{})}})但是当我运行时，我发现无论如何都没有办法触发这个事件。后来发现需要用document.addEventListener('keydown',function(){})来实现触发，所以很快第二版代码就出来了：alert('试试看能不能触发')让事件=originalEventConn||window.eventif(event.keyCode===46){this.$confirm('你确定要删除点击的行吗？','Prompt',{confirmButtonText:'OK',cancelButtonText:'取消',type:'warning'}).then(()=>{this.jsPlumb.deleteConnection(conn)}).catch(()=>{})}})执行，事件触发成功，但不能删除无论如何掉线，问题出在哪里？经查，删除行的deleteConnection方法没问题。问题出在删除的conn对象上。众所周知，在调用Delete的时候，我们需要先点击选中该行，然后按下键盘进行删除，那么需要在点击该行的时候获取这个对象，所以我们定义了一个全局变量selectedLine，这里块赋值给它：//给选中的行赋值this.selectedLine=conn//点击该行后，取出当前行的id——匹配右边的条件形式（一行对应一个不同形式的内容)this.currentLineId=conn.sourceId+'-'+conn.targetId......})然后，我写了第三个版本并优化了一些小细节：“使用keyup而不是kedown”:keydown事件如果点击一次没有效果，但是如果一直按着一个键不松开，这个事件会一直触发，会重复调用该方法，这无疑会造成性能损失；而keyup只会在释放键盘时触发。并且只触发一次。“添加Backspace键删除”：在日常使用习惯中，除了使用Delete键删除外，我们还习惯使用Backspace键删除回退，所以根据用户体验，我在判断，以便用户可以通过按两者中的任何一个来轻松删除行。代码如下：document.addEventListener('keyup',(conn,originalEventConn)=>{letevent=originalEventConn||window.event//8--退格，46--删除if(event.keyCode===8||event.keyCode===46){this.$confirm('你确定要删除点击的行吗？','Prompt',{confirmButtonText:'OK',cancelButtonText:'取消',type:'warning'}).then(()=>{this.jsPlumb.deleteConnection(this.selectedLine)}).catch(()=>{})}})至此，这个小需求或者功能优化就完成了，对于怕后续忘记，特此记录，也可以分享给遇到此类问题的小伙伴。作者简介：JeremyCC是一个爱唱歌的前端工程狮子，喜欢我的可以关注我哦！（头像仅供参考，哈哈）
