動態獲取鼠標點擊事件頂部和左側

我的目標是獲取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

動態獲取鼠標點擊事件頂部和左側

回答

相關問題