先放上最终效果，这是在点击图片之前：

这是点击图片后：

很清楚，一目了然，连小白用户都明白发生了什么。挺好的。

最近在做与编辑器相关的事情时，遇到一个要求，用户在编辑器中插入或者粘贴的图片都要点击，然后可以按退格键或者Delete键删除。

最初得到这个要求的想法是调用编辑自己的删除图片的方法来删除图片。但是检查源代码后发现，这个方法是编辑器的内部方法，没有暴露出来，所以第一个想法无法工作。

第二种思路是在编辑器顶部容器中监听keyup事件，然后判断是否是两个删除键，如果是，截取，然后找到当前点击的图片，手动删除。

事实上，这也行不通，原因有二。首先，这种删除是不能停止的，因为事件的监控是在顶层父元素中，然后停止实际上是停止事件对顶层容器的影响，而不是对发生元素的影响。在所有涉及事件冒泡的地方，对父容器的阻塞作用都无法达到目的，只能在事件开始发生的元素上阻塞。

然后，当按下删除按钮时，之前点击的图片不再处于点击状态，不再可用。因为取消选择之前，删除之后。

后来我突然意识到，想要的效果是在点击的时候选择图片，就像用户在网页中选择一条内容一样，就像选择那张图片一样。默认情况下，点击页面上的图片没有任何效果。我所要做的就是点击时选择图片。这样做的好处是，当用户点击图片并选择它时，如果点击删除按钮，Backspace和Delete按钮都可以被删除；而且，如果用户不喜欢删除，可以直接点击别的地方或者按上、下、左、右箭头取消选择，和用户平时的操作体验一样，完全没有副作用。

选择是HTML5的一个新界面，也是一种窗口的方法。它的用法是window.getSelection()。

获得选择后，我们希望将当前图片添加到选择中。Selection有Selection.selectAllChildren()方法，但是这个方法只能选择元素的所有子元素，但是我们想选择img元素本身，而img元素没有子元素。所以我继续看选择的方法，看看有没有其他的方法。果不其然，我找到了Selection.addRange()，它看起来就是我们要找的人。AddRange方法需要传入一个Range对象。什么是范围？

通常，当你在页面上选择一些东西时，你用鼠标点击一个大框。但是，如果您在编辑器中，您实际上可以选择几个片段。一般可以按住Ctrl/Control键进行多处选择。我猜这个选择类似于所有选中的区域，范围类似于每个单独选中的片段，所以先了解一下。

向下看，发现range有一个Range.selectNode()方法。这不是我要找的人吗？首先创建一个range对象，让range=document。createrange () createrange是文档的方法，然后将当前图片插入到区域中，再将区域插入到选区中。代码如下：

let CheckClickIMg=function(e){ let target=e . target；如果(目标。nodename。to lower case()===' img '){//删除所有以前的选择窗口。getselection()。删除所有范围()；let selection=window . getselection()；let range=document . create range()；range.selectNode(目标)；selection.addRange(范围)；}}这种实现方式最大的优点是使用了浏览器的原生功能，使其与用户的操作习惯保持一致，没有任何突兀。选择的效果很明显，选择之后，无论是删除还是取消，都和之前的习惯一致，非常容易。更重要的是，这些操作不需要编写代码，因为它们是浏览器的原生功能。

嗯，有点完美。

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！