整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
