js：获取鼠标点击位置，弹出提示框

完整代码

<script>
  // 监听鼠标点击事件
  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';

  })
</script>

<style>
  .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;
}
</style>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
 

参考
JavaScript实现划词翻译

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/125362325