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

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();
  }