css - 动态获取鼠标点击事件的顶部和左侧

Question

我的目标是在单击 button 时获取 cursor 的 top 和 left 位置并分配它到 popover。这样做的目的是让popover正好在被点击的位置。请引用https://jsfiddle.net/VUZhL/2684/

<a id="example" class="btn btn-primary" rel="popover" (click)="showCords($event)"
   data-content="This is the body of Popover"
   data-original-title="Creativity Tuts">pop
</a> 

这里是 onclick 事件，我正在调用 function 来获取 clientX 和 clientY。

但似乎没有任何效果。我是 bootstrap 的新手，刚开始学习，甚至不知道这是否可行。最糟糕的是我应该只使用 javascript 而不是 JQUERY。甚至 JSFiddle 也只是一个基本的。

感谢任何帮助。

提前致谢:)

更新:

  function showCords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coords = "X coords: " + x + ", Y coords: " + y;
    document.getElementById("example").setAttribute("data-content", coords);
     document.getElementById("example").style.left="x";
     document.getElementById("example").style.top="y";
    $('#example').popover();
  }

谁能告诉我我到底犯了什么错误。我正在尝试做这样的事情 http://codepen.io/rm89/pen/aNOmzQ在这里，我的弹出框必须位于我点击按钮的位置。

更新 2::

How to open a popover on the mouse click location .上面链接中的答案是真正需要的，但不幸的是它在 JQUERY 中。有人可以帮助我将答案转换为 JAVASCRIPT

Answer 1

给你 JSFiddle

首先 在元素上使用 onclick 而不是 (click)，second 创建如下所示的 javascript 函数并使用 clientX 获取顶部或左侧> 或 clientY，如果您使用 event 获取变量，您应该将其作为 event 而不是 $event 发送，如果你想在 popover() 上显示它，你应该在 data-content 上设置它。

  function showCords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coords = "X coords: " + x + ", Y coords: " + y;
    document.getElementById("example").setAttribute("data-content", coords);
    $('#example').popover();
  }