弹出菜单onclick在鼠标位置

Question

我是编码的新手，所以请多多包涵。 我正在尝试创建一个菜单（用于应用程序），该菜单在用户点击并按住屏幕时出现。 基本上，我正在寻找一个类似于Pinterest应用程序单击并按住菜单功能的菜单。 （在此处查看： http : //techcrunch.com/2013/07/31/pinterests-mobile-app-gets-path-like-animations-readies-personalization-options/ ）

我已经找到创建类似代码的代码（ http://www.jqueryscript.net/menu/Animated-Arc-Popup-Menu-with-jQuery-CSS3-Transitions.html ），但我希望它显示在用户握住屏幕，而不是固定位置。 我已经和一位教授讨论过这个问题，他建议使用offset（），但是我不确定如何实现它。 菜单将一直隐藏，直到用户触发它为止。

Answer 1

编程方面的一些一般性建议是将程序分解为可以最小的逻辑部分，并一次解决这些小问题。 一种

1. 尝试在页面上或活动区域中的某处单击时提醒消息
2. 然后在您单击某处时尝试在页面上的任何位置创建一个100 x 100的黑框（div元素）
3. 然后尝试使用教授建议的偏移量使该框显示在您单击的位置
4. 然后更改您以前在mousedown上所做的操作，然后在mouseup上执行另一个功能以删除该黑框。
5. 拥有所有功能后，您可以将黑匣子设置为看起来像菜单的样式，并在其上具有功能按钮。 您可以在每次单击时创建/销毁菜单项，也可以创建一次，然后在鼠标按下/鼠标向上移动时切换其可见性/位置。

每一小步之后，请继续检查您的工作，以确保没有错误。 我建议您在本地计算机上的html文件中，jsfiddle.net，某些javascript编辑软件（我不知道）或它们的组合中工作。

这是一些帮助您入门的帮助。https://jsfiddle.net/rz7dayfy/单击橙色框尝试一下。

var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mousedown', function(e){
  xPos = e.clientX - myDiv.offsetLeft;
  yPos = e.clientY - myDiv.offsetTop;
  alert('myDiv clicked at x: ' + xPos + ', y: ' + yPos);
});

它在相关区域上创建了一个事件侦听器，听起来像是页面的主体。 然后，找到该区域被单击的位置的xy坐标。 Y轴从顶部的0开始，并随着您的下降而正向增加。 X轴从左侧的0开始，向右移动时正向增加。 该偏移量是因为jsfiddle在结果窗口中围绕结果创建了一些填充。