Open yanlele opened 1 month ago
关键词:DOM getSelection 方法 应用场景
主要考察 dom 方法, getSelection 属于很冷门知识, 只会在做过富文本的同学面试过程中可能会问得到。
getSelection
要在划词选择的文本上添加右键菜单,可以按照以下步骤进行操作:
contextmenu
document.addEventListener("contextmenu", function (event) { // 阻止默认的浏览器右键菜单 event.preventDefault(); // 在此处显示自定义右键菜单 showCustomMenu(event); });
function showCustomMenu(event) { const customMenu = document.createElement("div"); customMenu.style.position = "absolute"; customMenu.style.left = event.clientX + "px"; customMenu.style.top = event.clientY + "px"; // 添加菜单选项 const menuItem1 = document.createElement("div"); menuItem1.textContent = "复制"; menuItem1.addEventListener("click", function () { // 处理复制操作 copySelectedText(); }); customMenu.appendChild(menuItem1); // 可以添加更多的菜单选项 document.body.appendChild(customMenu); }
function copySelectedText() { const selection = window.getSelection(); if (selection) { const range = selection.getRangeAt(0); const clipboardData = new ClipboardEvent("copy", { clipboardData: { text: range.toString() }, bubbles: true, }).clipboardData; document.execCommand("copy", false, clipboardData); } }
document.addEventListener("click", function (event) { const customMenu = document.querySelector(".custom-menu"); if (customMenu && !customMenu.contains(event.target)) { customMenu.remove(); } });
关键词:DOM getSelection 方法 应用场景
要在划词选择的文本上添加右键菜单,可以按照以下步骤进行操作:
contextmenu
事件的监听。