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

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

image.png

完整代码

<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>

参考

JavaScript实现划词翻译

相关文章
|
12天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
1月前
|
JavaScript 前端开发
JavaScript实现鼠标放上去之后高亮显示且隔行换色
JavaScript实现鼠标放上去之后高亮显示且隔行换色
12 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
JS点击切换背景图
JS点击切换背景图
30 0
|
15天前
|
JavaScript
js生成二维码点击可放大
js生成二维码点击可放大
|
1月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
12 0
JS+CSS3点击粒子烟花动画js特效
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
|
1月前
|
JavaScript
|
1月前
|
存储 JSON JavaScript
如何使用 JavaScript 代码创建虚拟鼠标点击事件
如何使用 JavaScript 代码创建虚拟鼠标点击事件
18 0
|
3月前
|
JavaScript
用html,js和layui写一个简单的点击打怪小游戏
用html,js和layui写一个简单的点击打怪小游戏
25 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
JS实现获取鼠标在画布中的位置
JS实现获取鼠标在画布中的位置
18 0