彈出式菜單onclick在鼠標位置

我對編碼比較陌生，所以請耐心等待。我正嘗試創建一個菜單（用於應用程序），當用戶點擊並保持在屏幕上時顯示。基本上我正在尋找一個菜單類似於Pinterest的應用程序點擊並保持菜單功能。（請看這裏：http://techcrunch.com/2013/07/31/pinterests-mobile-app-gets-path-like-animations-readies-personalization-options/）彈出式菜單onclick在鼠標位置

我發現代碼來創建類似的東西（http://www.jqueryscript.net/menu/Animated-Arc-Popup-Menu-with-jQuery-CSS3-Transitions.html），但我希望它出現在用戶在屏幕上，而不是固定的位置。我曾與一位教授討論過這個問題，他建議使用offset（），但我不太清楚如何實現它。該菜單將被隱藏，直到用戶觸發它爲止。

來源

2016-03-08 wingsfan64

一些編程的一般建議是將程序分解成最小的邏輯塊，然後逐個解決這些小塊。一個

試圖在點擊頁面上的某處提醒消息，或者在你的活動區域
然後嘗試創建一個100×100的黑盒子（div元素）的頁面上的任何地方，當你點擊某個
然後嘗試去出現對話框，在其中您點擊使用作爲你的教授建議
然後改變你按以前的方式是對鼠標按下和對鼠標鬆開另一個功能發生去除黑盒子所抵消。
一旦你擁有了所有可以讓黑盒子看起來像一個菜單，並有功能按鈕就可以了。您可以在每次點擊時創建/銷燬菜單項，也可以創建一次，並在mousedown/mouseup上切換其可見性/位置。

繼續在每一小步後檢查您的工作，以確保您沒有錯誤。我建議您在本地機器上的jsfiddle.net上使用html文件，一些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在結果窗口中的結果周圍創建了一些填充。

來源

2016-03-08 19:22:23 Observer

彈出式菜單onclick在鼠標位置

回答

相關問題