js鼠标长按弹出菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long Press Menu Example</title>
<style>
  #menu {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid black;
    padding: 5px;
  }
</style>
</head>
<body>

<div id="target" style="width: 200px; height: 200px; background-color: lightgray;">
  Long press me!
</div>
<div id="menu">
  <button onclick="alert('Option 1')">Option 1</button>
  <button onclick="alert('Option 2')">Option 2</button>
</div>

<script>
  let timer;
  const target = document.getElementById('target');
  const menu = document.getElementById('menu');

  target.addEventListener('mousedown', function(event) {
    timer = setTimeout(() => {
      menu.style.display = 'block';
      menu.style.left = event.pageX + 'px';
      menu.style.top = event.pageY + 'px';
    }, 500); // 500ms for long press
  });

  target.addEventListener('mouseup', function() {
    clearTimeout(timer);
  });

  document.addEventListener('mouseup', function() {
    menu.style.display = 'none';
  });
</script>

</body>
</html>

target.addEventListener('mouseup', function() {
  clearTimeout(timer);
});

document.addEventListener('mouseup', function() {
  menu.style.display = 'none';
});