实现鼠标右击目标,在右击处展示操作列,鼠标左击后操作列隐藏
- 鼠标右击事件 onContextMenu
<div οncοntextmenu="myFunction()" contextmenu="mymenu"> <p>在文本框内右击鼠标查看上下文菜单!</p> <menu type="context" id="mymenu"> <menuitem label="Refresh" οnclick="window.location.reload();" icon="ico_reload.png"></menuitem> <menu label="Share on..."> <menuitem label="Twitter" icon="ico_twitter.png" οnclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem> <menuitem label="Facebook" icon="ico_facebook.png" οnclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> </menu> <menuitem label="向该网页发送邮件" οnclick="window.location='mailto:?body='+window.location.href;"></menuitem> </menu> </div>
只有 Firefox 中支持 contextmenu 属性!在Firefox下,右击后,在原本的右击框中会增加两行操作
- 目前实现是阻止默认事件,展示自定义操作列
开发需知
- 需要 rc-tooltip 模块 链接
<Tooltip trigger="click" placement="bottomLeft" prefixCls="tab-contextmenu" // 样式前缀名称 defaultVisible overlay={this.contextMenu}> // 右击时展示的面板 <span></span> </Tooltip> <style> .tab-contextmenu { position: absolute; left: -9999px; top: -9999px; z-index: $zIndex-context-menu; display: block; background-color: #fff; &.tab-contextmenu-hidden { display: none; } } </style>
- react-dom
// 渲染一个React元素成为DOM,放到所提供的container里。并且返回这个组件的一个引用 ReactDOM.render(element, container[, callback]) // 从DOM元素中移除已挂载的React组件,清除它的事件处理器和state ReactDOM.unmountComponentAtNode(container)
开发实现
import Tooltip from 'rc-tooltip'; class ContextMenuDemo extends React.Component { contextMenu = <ul> <li>aaa</li> <li>aaa</li> </ul>; componentDidMount() { this.getContainer(); } getContainer = () => { if (!this.container) { this.container = document.createElement('div'); document.body.appendChild(this.container); } return this.container; } handleRightClick = event => { event.preventDefault(); event.stopPropagation(); if (this.toolTip) { ReactDOM.unmountComponentAtNode(this.cmContainer); this.toolTip = null; } this.toolTip = ( <Tooltip trigger="click" placement="bottomLeft" prefixCls="tab-contextmenu" defaultVisible overlay={this.contextMenu}> <span></span> </Tooltip> ); // 容器位置定位在鼠标右击处 Object.assign(this.container.style, { position: 'absolute', left: `${event.pageX}px`, top: `${event.pageY}px`, }); ReactDOM.render(this.toolTip, this.container); } render() { return ( <span onContextMenu={this.handleRightClick}> {pane.title} </span> ) } }