Nuxt CNode：Node.js专业中文社区

控制台中的url的点击ctrl + 左键实现url跳转的功能怎么实现的？

发布于 7 年前作者 zhouchdi 2784 次预览最后一次回复是 7 年前来自问答

问题如上所示

2 回复

zhouchdi

1楼•7 年前

使用opn插件(https://www.npmjs.com/package/opn)，希望对有相同需求的小伙伴有一些帮助

lzwai

2楼•7 年前

不谢

<body>
  <div>
    <span class="ctrl" data-url="http://baidu.com">baidu</span><br/>
    <span class="ctrl" data-url="http://taobao.com">taobao</span><br/>
  </div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    let curCtrl = null;

    const activeCtrl = ($ele) => {
      $ele.addClass('ctrl-active');
      $ele.css({
        textDecoration: 'underline',
        color: 'blue'
      });
    };

    const inactiveCtrl = ($ele) => {
      $ele.removeClass('ctrl-active');
      $ele.css({
        textDecoration: 'none',
        color: 'black'
      });
    }

    const crtrlOver = (e) => {
      const $target = $(e.currentTarget);
      curCtrl = e.currentTarget;

      e.ctrlKey ? activeCtrl($target) : inactiveCtrl($target);
    }

    const ctrlOut = (e) => {
      const $target = $(e.currentTarget);
      inactiveCtrl($target);
      curCtrl = null;
    }

    $('.ctrl').on('mouseover', crtrlOver);
    $('.ctrl').on('mouseout', ctrlOut);

    $('html').on('keydown', (e) => {
      e.ctrlKey && $('html').css('cursor', 'pointer')
      curCtrl && activeCtrl($(curCtrl))
    });

    $('html').on('keyup', (e) => {
      $('html').css('cursor', 'default');
      inactiveCtrl($(curCtrl));
    });


    $('html').delegate('.ctrl-active', 'click', (e) => {
      const $target = $(e.currentTarget);

      $('<a href="'+ $target.attr('data-url') + '" target="_blank"></a>')[0].click();
    });

  </script>
</body>