週末長知識: Range.getBoundingClientRect()

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

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,故可以繼續做下一個滑鼠選取動作而不受影響

See the Pen Range.getBoundingClientRect() demo by Robin Fan (@pc035860) on CodePen.

後記

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

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

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

comments powered by Disqus