鼠标右击在对应位置展示自定义元素实现鼠标右击目标，在右击处展示操作列，鼠标左击后操作列隐藏开发需知开发实现

48 阅读 0 评论 32 点赞

我是靠谱客的博主拼搏裙子，最近开发中收集的这篇文章主要介绍鼠标右击在对应位置展示自定义元素实现鼠标右击目标，在右击处展示操作列，鼠标左击后操作列隐藏开发需知开发实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

实现鼠标右击目标，在右击处展示操作列，鼠标左击后操作列隐藏

鼠标右击事件 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>
    )
  }
}