從本週開始推出「週末長知識」系列文章，希望能夠用簡潔俐落的方式(?)來一起長知識。

Range.getBoundingClientRect()

https://developer.mozilla.org/en-US/docs/Web/API/range.getBoundingClientRect

The Range.getBoundingClientRect() method returns a ClientRect object that bounds the contents of the range; this a rectangle enclosing the union of the bounding rectangles for all the elements in the range.

第一次看到這個東西是在偷看 Evernote Web Clipper 的 code 的時候… 當時覺得蠻新奇的就把它留在 gist 裡面，本週末因緣際會翻到這個 gist，就拿出來說嘴一番 lol

這個東西的做用講中文就是

基於被你選取的 Range object 內容所取得的 DOM 元素，返回 最小外接矩形

聽起來很抽象對吧.. 因為是「週末長知識」文章，我也不想說太多，直接來看 demo 吧！

Demo

這個 demo 的基本動作如下，詳情請見 “JS” 內容：

1. 在 mouseup 時取得選取的 Range object
2. 利用 Range object 取得最小外接矩形的資料
3. 用 position: fixed 的 <div>，設定 border-width 來遮掉非選取區域
4. 該 <div> 上有設定 pointer-events: none，故可以繼續做下一個滑鼠選取動作而不受影響

後記

Evernote Web Clipper 可以說是我看過所有的 chrome extension 裡，最能夠稱為集大成的 extension 之一。 之前偶爾都還可以進去參考一下他們處理一些事情的方法，結果大約半年多以前他們也把 code minify 了…

上面利用 border-width 來做的這種效果也是跟他們學的 XD

「週末長知識」下期待續！