浏览器自定义右键菜单及选中复制功能## 选中功能选中文字后出现自定义功能 ![image.png](https://p

选中功能

选中文字后出现自定义功能
自定义菜单

鼠标右键点击，自定义菜单
实现代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<style>
  .contextmenu {
    display: none;
    width: 130px;
    height: auto;
    position: absolute;
    top: 0;
    left: -1000px;
    border: solid 1px #ddd;
    background: #fff;
    box-shadow: 1px 1px 2px #d1d1d1;
    z-index: 100000001;
    text-align: left;
  }

  .contextmenu li a {
    display: block;
    height: 38px;
    line-height: 38px;
    text-decoration: none;
    outline: none;
    text-indent: 20px;
    font-size: 12px;
    color: #333;
  }

  .contextmenu li a:hover {
    color: #2c8000;
    background-color: #f5f5f5;
  }

  .unlogin {
    width: auto;
    white-space: nowrap;
    word-break: keep-all;
    border-left: none;
    box-shadow: 0 0 4px #d1d1d1;
    font-size: 0;
    box-shadow: 0 0 6px #d1d1d1;
  }

  ol,
  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .unlogin li {
    display: inline-block;
  }

  .unlogin li a {
    display: inline-block;
    padding: 0 12px;
    text-indent: 0;
    height: 38px;
    border-left: 1px solid #ebebeb;
    font-size: 14px;
    line-height: 37px;
    cursor: pointer;
  }
</style>

<body>
  <div class="content-area" id="root">
    <p>zhiafafwafoafeowfwef</p>
    <div>fadafafewa</div>
    <div class="contextmenu" id="contextmenudiv" style="display: none;">
      <ul>
        <li><a href="javascript:void(0)" onclick="document.execCommand('Copy');$('.contextmenu').hide();">复制</a>
        </li>
      </ul>
    </div>
    <div class="contextmenu unlogin" id="contextmenudivmouseup" style="display: none">
      <ul>
        <li>
          <a class="a1" href="javascript:void(0)"
            onclick="document.execCommand('Copy');$('.contextmenu').hide();">复制</a>
        </li>
      </ul>
    </div>
  </div>
  <script>
    // 选中区域
    function getSelect(targetNode) {
      if (window.getSelection) {
        //chrome等主流浏览器
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNode(targetNode);
        selection.removeAllRanges();
        selection.addRange(range);
      } else if (document.body.createTextRange) {
        //ie
        var range = document.body.createTextRange();
        range.moveToElementText(targetNode);
        range.select();
      }
    }
    // 右键菜单事件
    $('#root').contextmenu(function (e) {
      e.preventDefault()
      // 解决图片右键不能复制
      if (e.target.tagName == "IMG") {
        getSelect(e.target)
      }
      $('.contextmenu').hide();
      $('#contextmenudiv').css({
        "display": "block",
        "top": e.pageY + "px",
        "left": e.pageX + "px"
      })
    })

    $('#root').on('contextmenu', function () { return false; }).click(function () {
      $('#contextmenudiv').hide()
    });

    // 选中后滑动
    $("#root").mouseup(function (e) {
      e.preventDefault()
      var el = window.getSelection ? window.getSelection() : document.selection.createRange().text;
      let selectText = el.toString()
      let node = $('#contextmenudivmouseup')

      if (selectText && e.button == 0 && node.is(':hidden')) {
        $('.contextmenu').hide();
        node.css({
          "display": "block",
          "top": e.clientY + "px",
          "left": e.clientX + "px"
        })
      } else {
        node.hide()
      }
      $(this).on('click', function (e) {
        e.stopImmediatePropagation()
      })
    });


    $(document).on('click', function () {
      $('.contextmenu').hide();
    })

    $('#root').on('copy', function () {
      if (!$.cookie('username')) {
        alert('登录后复制！')
        return false
      } else {
        alert('复制成功！')
      }
    })
  </script>
</body>

</html>