您当前的位置: 首页 > 

彭世瑜

暂无认证

  • 3浏览

    0关注

    2791博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

js:获取鼠标点击位置,弹出提示框

彭世瑜 发布时间:2022-06-19 20:57:44 ,浏览量:3

在这里插入图片描述

完整代码


  // 监听鼠标点击事件
  document.addEventListener('click', function(event){
    console.log('mouseup');
    let box = document.querySelector('#tip-box');

    if(!box){
      box = document.createElement('div');
      box.classList.add('tip-box');
      box.setAttribute('id', 'tip-box')
      document.body.append(box);
    }

    box.innerHTML = 'Hello';
    box.style.top = event.clientY + 'px';
    box.style.left = event.clientX + 'px';
    box.style.display = 'block';

  })



  .tip-box {
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    padding: 15px 22px;
    position: fixed;
    min-width: 300px;
    max-width: 350px;
    width: auto;
    height: auto;
    min-height: 100px;
    background: #efefef;
    display: none;
    line-height: 1.5em;
}

参考 JavaScript实现划词翻译

关注
打赏
1665367115
查看更多评论
立即登录/注册

微信扫码登录

0.0552s