先放上最后的效果，這是點擊圖片以前：

這是點擊圖片以后：

非常清晰，一目了然，就算是小白用戶也明白發(fā)生了什么。挺好的。

最近在做編輯器相關(guān)的東西，遇到一個需求，用戶在編輯器中插入或者粘貼的圖片要支持點擊以后，可以按 Backspace 鍵或者 Delete 鍵刪除掉。

剛開始拿到這個需求的想法是調(diào)用編輯器自帶的刪除圖片方法刪掉圖片，但后來查看源碼發(fā)現(xiàn)這個方法是編輯器內(nèi)部方法，并沒有暴露出來，于是第一個思路走不通了。

第二個思路是在編輯器的頂層容器里監(jiān)聽 keyup 事件，然后判斷是否是兩個刪除鍵，如果是就攔截，然后找到當前點擊的圖片，手動刪掉。

實際上這也是行不通的，原因有二。首先，這個刪除是沒法阻止的，因為事件的監(jiān)聽是在頂層父元素里，這時候阻止其實是阻止掉事件在頂層容器上的效果，而不是在發(fā)生元素上的效果。所有涉及到事件冒泡的地方，在父容器上阻止效果都是不能達到目的的，只能在事件最開始發(fā)生的元素上阻止。 

然后，當按下刪除鍵的時候，之前點擊的圖片已經(jīng)不是點擊狀態(tài)了，已經(jīng)拿不到了。因為取消選擇在前，刪除在后。

后來忽然意識到，想要的效果其實就是點擊圖片的時候選中圖片，就像用戶自己選中網(wǎng)頁中一段內(nèi)容那樣選中那張圖片就好了。頁面上點擊一個圖片默認是沒有效果的，我要做的僅僅是點擊時候選中這個圖片就可以了。這樣做的好處是，當用戶點擊圖片選中以后，如果點刪除鍵，無論是 Backspace 還是 Delete 鍵都可以刪除；而且如果用戶不像刪除，直接點擊別的地方，或者按下上下左右箭頭就可以取消選擇，這和用戶平時的操作體驗是一樣的，根本沒有什么副作用。

selection 是 HTML5 的新接口，是 window 的一個方法，用法是 window.getSelection().

取得 selection 以后，要把當前圖片加入到選取中，selection 有一個 Selection.selectAllChildren() 方法，但這個方法只能選中元素的全部子元素，而我們要選中的是 img 元素自身，img 元素也沒有子元素。于是繼續(xù)在 selection 的方法中看看有沒有別的長的像的方法，果然，找到了 Selection.addRange() 看這長相一看就很像我們要找的人。addRange 方法需要傳入一個 range 對象，range是啥呢？

平時在頁面上選擇東西都是鼠標咔一下框一大片，但如果在編輯器里，其實是可以選擇好幾個片段的，一般按住 Ctrl / Control 鍵就可以多處選擇。我猜這個 selection 就類似于選中的所有區(qū)域，range 就類似于每一個單獨的選中的片段，先這么理解。

繼續(xù)往下看，發(fā)現(xiàn) range 有一個 Range.selectNode() 方法，這不正是我要找的人嗎？先創(chuàng)建一個 range 對象，let range = document.createRange()  createRange 是 document 的方法，然后講當前圖片插入 range，再把 range 插入 selection 中即可。代碼如下：

let checkClickImg = function(e) {
 let target = e.target;
 if (target.nodeName.toLowerCase() === 'img') {
  // 刪除之前所有的選區(qū)
  window.getSelection().removeAllRanges();
  let selection = window.getSelection();
  let range = document.createRange();
  range.selectNode(target);
  selection.addRange(range);
 }
}

這個實現(xiàn)方法的最大優(yōu)點在于利用瀏覽器原生自帶的功能，這樣就和用戶的操作習慣保持一致，不會有任何的突兀。選中的效果很明顯，而且選中以后無論是刪除，還是取消，都跟之前習慣一致，都很容易，更要的是這些操作不用再寫代碼了啊，因為是瀏覽器原生自帶的功能。

嗯，算是比較完美了。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論