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

我的目标是获取top和left的位置cursor当单击一个button并将其分配给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这里我的popover必须在我点击buuton的位置。

更新2：：

How to open a popover on the mouse click location。上述链接中的答案是实际需要，但不幸的是它在JQUERY中。有人可以帮助我在改造回答JAVASCRIPT

来源

2017-03-18 Karthi

在这里你去JSFiddle

第一使用onclick元素，而不是(click)上，第二创建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(); 
    }

来源

2017-03-18 07:42:50 Pedram

感谢RESP [ONSE。但popover没有被触发？ – Karthi

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

回答

相关问题