原生JS在網頁上覆制的所有文字後面自動加上一段版權宣告
阿新 • • 發佈：2020-01-18
不少技術部落格有這樣的處理，當我們複製程式碼的時候，會自動加上一段本資訊版權為XXXX，這是怎麼實現的呢？
其實實現的方式很簡單，可以在我的網站頁面上繫結一個copy事件，當你複製文章內容的時候，自動在剪下板文字後面加上一段版權宣告。
我這邊是沒有加這些的，程式碼什麼的想複製就複製好了。大家都是靠程式碼技能吃飯的，可以體會寫程式碼的不易，相信一定會尊重知識勞動成果——保留出處等版權資訊的。
效果示例 :
程式碼示例：
<body>
<p>是的你沒有看錯, 我還是在路邊吃快餐, 在北京市的三里屯, 在上海市的外灘</p>
</body>
<script>
// 監聽整個網頁的copy(複製)事件
document.addEventListener('copy', function (event) {
// clipboardData 物件是為通過編輯選單、快捷選單和快捷鍵執行的編輯操作所保留的，也就是你複製或者剪下內容
let clipboardData = event.clipboardData || window.clipboardData;
// 如果未複製或者未剪下，則return出去
if (!clipboardData) { return; }
// Selection 物件，表示使用者選擇的文字範圍或游標的當前位置。
// 宣告一個變數接收 -- 使用者輸入的剪下或者複製的文字轉化為字串
let text = window.getSelection().toString();
if (text) {
// 如果文字存在，首先取消文字的預設事件
event.preventDefault();
// 通過呼叫常clipboardData物件的 setData(format, data) 方法；來設定相關文字
// setData(format, data);引數
// format
// 一個DOMString 表示要新增到 drag object的拖動資料的型別。
// data
// 一個 DOMString表示要新增到 drag object的資料。
clipboardData.setData('text/plain', text + '\n\n張無忌 版權所有');
}
});
</script>
以上程式碼相關引數詳解：
element.addEventListener(type, handle, false);
type: 事件觸發型別，如click,keypress等等，下面我們詳細的講講事件型別！！
handle:事件處理函式，事件出發後，定義可能發生的變化！！
false: 表示事件冒泡模型，一般來說都是false。
clipboardData
clipboardData 屬性儲存了一個 DataTransfer 物件（使用者剪下板的內容），這個物件可用於：
format
text/plain，text/uri-list。data表示要新增到剪下板的資料。
- 描述哪些資料可以由
cut和copy事件處理器放入剪下板，通常通過呼叫setData(format,方法；設定拖放操作的資料（剪下板的資料）到指定的資料和型別。
- 獲取由
paste事件處理器拷貝進剪下板的資料，通常通過呼叫getData(format)方法
event.preventDefault() 方法阻止元素髮生預設的行為。
例如：
- 當點選提交按鈕時阻止對錶單的提交
- 阻止以下 URL 的連結