事件处理&鼠标右击菜单样式-优快云博客

本文链接：https://blog.youkuaiyun.com/mebeenwhere/article/details/142518539

文章目录

概要

事件 右击菜单样式

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>diy</title>
  </head>
  <body>
    <div style="padding: 100px; background-color: #ccc">
      <div>the template.</div>
    </div>
    <div id="contextmenudiv" style="position: absolute; display: none; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 10px">
      <div>删除</div>
      <div>复制</div>
      <div>粘贴</div>
      <div>剪切</div>
      <div>重命名</div>
    </div>
  </body>
  <script type="text/javascript">
    const eventFun = (e) => {
      console.log('the event function')
    }
    const divDom = document.querySelector('div')
    divDom.addEventListener('click', eventFun)
    //手动触发事件
    divDom.dispatchEvent(new Event('click'))
    divDom.addEventListener('contextmenu', (evt) => {
      evt.preventDefault()
      console.log(evt.pageX, evt.pageY)
      console.log('screenX value: ' + evt.screenX + '\n', 'screenY value: ' + evt.screenY + '\n')
      console.log('clientX value: ' + evt.clientX + '\n' + 'clientY value: ' + evt.clientY + '\n')
      document.getElementById('contextmenudiv').style.display = 'block'
      document.getElementById('contextmenudiv').style.left = evt.clientX + 'px'
      document.getElementById('contextmenudiv').style.top = evt.clientY + 'px'
    })
    document.addEventListener('click', (evt) => {
      document.getElementById('contextmenudiv').style.display = 'none'
    })
    document.getElementById('contextmenudiv').addEventListener('click', (evt) => {
      evt.stopPropagation()
    })
  </script>
</html>