整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
JavaScript應用的事件描述：
1、oncontextmenu()，事件在元素中用戶右擊鼠標時觸發并打開上下文菜單。
2、onmousedown()，事件會在鼠標按鍵被按下時發生。
3、onmouseup()，事件會在鼠標按鍵被松開時發生。
自定義右鍵菜單效果：
右鍵框選區域
輯導語：在軟件系統中，右鍵菜單是非常常見的，它包含了各種命令可以選擇。本文作者分享了用中繼器制作右鍵顯示菜單，結合動態面板，實現快捷菜單頁面跳轉效果的方法，一起來看一下吧。
右鍵菜單在軟件系統中是非常常見的，他可以作為一個快捷方式，里邊包含各種命令可以選擇。那今天作者就教大家，如果用中繼器制作一個右鍵顯示菜單的的原型模板，結合動態面板，實現快捷菜單頁面跳轉的效果。
原型地址：https://h2pkno.axshare.com/#g=1
其實做鼠標右鍵菜單的最主要的難點是鼠標右鍵這個動作，因為Axure是通過瀏覽器來發布預覽的，而瀏覽器自身也有右鍵菜單的快捷操作，所以當我們做鼠標右鍵這個操作時，首先是顯示瀏覽器自身的右鍵菜單，從而導致原型中的鼠標右鍵這個動作失效。
那我們就要考慮，能不能把瀏覽器中的右鍵顯示的快捷菜單這個操作禁用呢？當然可以，其實我們可以通過代碼的方式將它禁用掉，對應的代碼如：
我們可以把上述代碼復制到字體里，那在預覽演示的時候就會自動生效，具體操作是點擊工具欄的發布——生成html文件——選擇fonts——添加字體——選擇@font-face——將代碼復制進入。這樣就可以實現原型內鼠標右鍵的交互而又不觸發瀏覽器鼠標右擊的默認操作。
注：上述方法為Axure的操作路徑，其他版本位置可能有所出入，但是都是可行的。
本案例是用中繼器菜單和動態面板聯動制作的，在動態面板不同的stare里面放入對應的內容，然后后續可以通過設置面板狀態的交互就可以實現跳轉不同的頁面了。當然了如果你們不想把頁面放在動態面板內，也可以用多個頁面，用打開鏈接的交互也可以實現。具體可以按照你們實際需求操作，思路都是一樣的。
那我們把頁面內容放進動態面板里不同的狀態后，要把動態面板每個狀態state命名成和菜單一致的名字，案例中為我的論文、我的收藏、我的問答、我的關注、我的點贊、我的通知、我的記錄、我的資料，這一步命名涉及后面頁面的跳轉。
我們在中繼器默認的表格里填寫菜單名稱，和前面動態面板名稱一致即可，案例中為我的論文、我的收藏、我的問答、我的關注、我的點贊、我的通知、我的記錄、我的資料。
元件的樣式和其他的效果需要的話可以自由添加，例如移入變色，可以在元件樣式懸停時添加；需要陰影效果的也可以自由添加，這里就不詳細說明了，可以根據自己的喜好設置。
首先我們用顯示的交互，將菜單組合中繼器顯示出來，這里注意我們要選擇燈箱效果，燈箱顏色為同名即可，這樣設置以后，如果點擊菜單外的內容，菜單就可以自動隱藏。
然后，我們還要讓彈窗菜單移動到鼠標指針的位置，這里我們用移動的交互就可以了，選擇到達，這里需要用到鼠標指針的函數Cursor.x和Cursor.y，分別對應鼠標指針所在的x坐標值和y坐標值。
最后我們為了顯示的彈出不跳出窗口，我們在移動時增加邊界，這里用到window函數，window.height是窗口高度，window.width是窗口的寬度，我們設置菜單的右邊界小于窗口的寬度，下邊界小于窗口的寬度即可。
如果鼠標點擊頁面空白地方時，其實交互也是和上面一樣，這里考慮到上面的動態面板不是全屏的，所以我們補充這個交互，我們也不用復制上面的交互，我們直接用觸發的交互，觸發動態面板鼠標右擊時的交互即可。
鼠標單擊中繼器菜單里面的選項時，我們用設置面板狀態的交互，設置頁面動態面板的值為中繼器表格內當前行記錄的文本值，簡單來說你們可以用item.column0（如果你們沒有改列名，如果改了列名這里也對應變化）或者this.text。最后我們用隱藏的交互，將菜單隱藏起來即可。
最后的最后，這里提醒一下，菜單選項名必須和動態面板里狀態名一一對應，不然就跳轉不了的。
這樣我們就完成了鼠標右鍵顯示中繼器菜單原型模板了，下次使用時，我們只需要在中繼器表格里填寫選項，即可自動生成交互，是不是很方便呢？感興趣的同學們可以動手試試哦。
那本期的教程就到此為止了，感謝您的閱讀，我們下期見，88~
本文由 @AI產品人 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
當用戶進行鼠標框選選擇了頁面上的內容時，把選擇的內容進行上報。
雖然這需求就一句話的事，但是很顯然，沒那么簡單...
因為鼠標框選說起來簡單，就是選擇的內容，但是這包含很多中情況，比如：只選擇文案、選擇圖片、選擇輸入框、輸入框中的內容選擇、iframe、等。
簡單總結，分為以下幾點：
鼠標框選包含以下幾點：
老生常談的技術點了，這里不能用節流，因為肯定不能你鼠標選擇的時候，隔一段時間返回一段內容，肯定是選擇之后一起返回。
這里用 debounce 主要也是用在事件監聽和事件處理上。
事件監聽，因為鼠標選擇，不僅僅是鼠標按下到鼠標抬起，還包括雙擊、右鍵、全選。
需要使用事件監聽對事件作處理。
Range 接口表示一個包含節點與文本節點的一部分的文檔片段。
Range 是瀏覽器原生的對象。
<body>
<ul>
<li>Vite</li>
<li>Vue</li>
<li>React</li>
<li>VitePress</li>
<li>NaiveUI</li>
</ul>
</body>
<script>
// 創建 Range 對象
const range = new Range()
const liDoms = document.querySelectorAll("li");
// Range 起始位置在 li 2
range.setStartBefore(liDoms[1]);
// Range 結束位置在 li 3
range.setEndAfter(liDoms[2]);
// 獲取 selection 對象
const selection = window.getSelection();
// 添加光標選擇的范圍
selection.addRange(range);
</script>可以看到，選擇內容為第二行和第三行
只選擇 li 中的 itePres
可以看出 range 屬性對應的值
const range = document.createRange();const range = window.getSelection().getRangeAt(0)if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(e.clientX, e.clientY);
}const range = new Range()Selection 對象表示用戶選擇的文本范圍或插入符號的當前位置。它代表頁面中的文本選區，可能橫跨多個元素。
window.getSelection()錨指的是一個選區的起始點（不同于 HTML 中的錨點鏈接）。當我們使用鼠標框選一個區域的時候，錨點就是我們鼠標按下瞬間的那個點。在用戶拖動鼠標時，錨點是不會變的。
選區的焦點是該選區的終點，當你用鼠標框選一個選區的時候，焦點是你的鼠標松開瞬間所記錄的那個點。隨著用戶拖動鼠標，焦點的位置會隨著改變。
范圍指的是文檔中連續的一部分。一個范圍包括整個節點，也可以包含節點的一部分，例如文本節點的一部分。用戶通常下只能選擇一個范圍，但是有的時候用戶也有可能選擇多個范圍。
一個用戶可編輯的元素（例如一個使用 contenteditable 的 HTML 元素，或是在啟用了 designMode 的 Document 的子元素）。
首先要清楚，選擇的起點稱為錨點(anchor)，終點稱為焦點(focus)。
function debounce (fn, time = 500) {
let timeout = null; // 創建一個標記用來存放定時器的返回值
return function () {
clearTimeout(timeout) // 每當觸發時，把前一個 定時器 clear 掉
timeout = setTimeout(() => { // 創建一個新的 定時器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}/**
* debounce 函數類型
*/
type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
/**
* debounce 防抖函數
* @param {Function} func 函數
* @param {number} wait 等待時間
* @param {false} immediate 是否立即執行
* @returns {DebouncedFunction}
*/
function debounce<F extends (...args: any[]) => any>(
func: F,
wait = 500,
immediate = false
): DebouncedFunction<F> {
let timeout: ReturnType<typeof setTimeout> | null
return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const context = this
const later = function () {
timeout = null
if (!immediate) {
func.apply(context, args)
}
}
const callNow = immediate && !timeout
if (timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(later, wait)
if (callNow) {
func.apply(context, args)
}
}
}nterface IGetSelectContentProps {
type: 'html' | 'text'
content: string
}
/**
* 獲取選擇的內容
* @returns {null | IGetSelectContentProps} 返回選擇的內容
*/
const getSelectContent = (): null | IGetSelectContentProps => {
const selection = window.getSelection()
if (selection) {
// 1. 是焦點在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
// 獲取選擇范圍
const range = selection.getRangeAt(0)
// 獲取選擇內容
const rangeClone = range.cloneContents()
// 判斷選擇內容里面有沒有節點
if (rangeClone.childElementCount > 0) {
// 創建 div 標簽
const container = document.createElement('div')
// div 標簽 append 復制節點
container.appendChild(rangeClone)
// 如果復制的內容長度為 0
if (!selection.toString().trim().length) {
// 判斷是否有選擇特殊節點
const isSpNode = hasSpNode(container)
return isSpNode
? {
type: 'html',
content: container.innerHTML
}
: null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
} else {
return null
}
}
/**
* 判斷是否包含特殊元素
* @param {Element} parent 父元素
* @returns {boolean} 是否包含特殊元素
*/
const hasSpNode = (parent: Element): boolean => {
const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
const inpList = ['input', 'textarea', 'select']
return Array.from(parent.children).some((node) => {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (
inpList.includes(node.nodeName.toLocaleLowerCase()) &&
(node as HTMLInputElement).value.trim().length
)
return true
if (node.children) {
return hasSpNode(node)
}
return false
})
}/**
* 獲取框選的文案內容
* @returns {string} 返回框選的內容
*/
const getSelectTextContent = (): string => {
const selection = window.getSelection()
return selection?.toString().trim() || ''
}// 是否時鼠標點擊動作
let selectionchangeMouseTrack: boolean = false
const selectionChangeFun = debounce(() => {
const selectContent = getSelectContent()
console.log('selectContent', selectContent)
// todo... 處理上報
selectionchangeMouseTrack = false
})
// 添加 mousedown 監聽事件
document.addEventListener('mousedown', () => {
selectionchangeMouseTrack = true
})
// 添加 mouseup 監聽事件
document.addEventListener(
'mouseup',
debounce(() => {
selectionChangeFun()
}, 100)
)
// 添加 selectionchange 監聽事件
document.addEventListener(
'selectionchange',
debounce(() => {
if (selectionchangeMouseTrack) return
selectionChangeFun()
})
)
// 添加 dblclick 監聽事件
document.addEventListener('dblclick', () => {
selectionChangeFun()
})
// 添加 contextmenu 監聽事件
document.addEventListener(
'contextmenu',
debounce(() => {
selectionChangeFun()
})
)也可以進行封裝
/**
* addEventlistener function 類型
*/
export interface IEventHandlerProps {
[eventName: string]: EventListenerOrEventListenerObject
}
let selectionchangeMouseTrack: boolean = false
const eventHandlers: IEventHandlerProps = {
// 鼠標 down 事件
mousedown: () => {
selectionchangeMouseTrack = true
},
// 鼠標 up 事件
mouseup: debounce(() => selectionChangeFun(), 100),
// 選擇事件
selectionchange: debounce(() => {
if (selectionchangeMouseTrack) return
selectionChangeFun()
}),
// 雙擊事件
dblclick: () => selectionChangeFun(),
// 右鍵事件
contextmenu: debounce(() => selectionChangeFun())
}
Object.keys(eventHandlers).forEach((event) => {
document.addEventListener(event, eventHandlers[event])
})function debounce (fn, time = 500) {
let timeout = null; // 創建一個標記用來存放定時器的返回值
return function () {
clearTimeout(timeout) // 每當觸發時，把前一個 定時器 clear 掉
timeout = setTimeout(() => { // 創建一個新的 定時器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}
let selectionchangeMouseTrack = false
document.addEventListener('mousedown', (e) => {
selectionchangeMouseTrack = true
console.log('mousedown', e)
})
document.addEventListener('mouseup', debounce((e) => {
console.log('mouseup', e)
selectionChangeFun()
}, 100))
document.addEventListener('selectionchange', debounce((e) => {
console.log('selectionchange', e)
if (selectionchangeMouseTrack) return
selectionChangeFun()
}))
document.addEventListener('dblclick', (e) => {
console.log('dblclick', e)
selectionChangeFun()
})
document.addEventListener('contextmenu',debounce(() => {
selectionChangeFun()
}))
const selectionChangeFun = debounce(() => {
const selectContent = getSelectContent()
selectionchangeMouseTrack = false
console.log('selectContent', selectContent)
})
const getSelectContent = () => {
const selection = window.getSelection();
if (selection) {
// 1. 是焦點在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
// 獲取選擇范圍
const range = selection.getRangeAt(0);
// 獲取選擇內容
const rangeClone = range.cloneContents()
// 判斷選擇內容里面有沒有節點
if (rangeClone.childElementCount > 0) {
const container = document.createElement('div');
container.appendChild(rangeClone);
if (!selection.toString().trim().length) {
const hasSpNode = getSpNode(container)
return hasSpNode ? {
type: 'html',
content: container.innerHTML
} : null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
} else {
return null
}
}
const getSpNode = (parent) => {
const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
const inpList = ['input', 'textarea', 'select']
return Array.from(parent.children).some((node) => {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
if (node.children) {
return getSpNode(node)
}
return false
})
}*請認真填寫需求信息，我們會在24小時內與您取得聯系。
