获取点击位置后如何动态下拉 [英] how to make drop down dynamically after getting position of click
问题描述
嗨
我需要在获得点击位置后动态显示下拉菜单。
这意味着我需要首先找到点击事件的X和y坐标而不是显示下拉（在下面）。
喜欢那个
var select = document.createElement（select）;
//动态创建一个选项元素
var option = document.createElement（option）;
..
再次解释：
点击按钮：我有2或3个按钮，我需要在动态点击后显示菜单选项。所以我首先需要计算点击事件的x和y坐标。
i我这样做。
i就是这样...
创建区域
< div id ='menuOption'>< / div>
< li class =下拉切换菜单click_hdata-toggle =dropdownhref =javascript：vo id（0）id =configonClick ='test（）'>配置
< / li>
功能测试（e）{
var evt = e？ e：window.event;
var clickX = 0，clickY = 0;
if（（evt.clientX || evt.clientY ）&&
document.body&&
document.body.scrollLeft！= null）{
clickX = evt。 clientX + document.body.scrollLeft;
clickY = evt.clientY + document.body.scrollTop;
}
if（（evt。 clientX || evt.clientY）&&
document.compatMode =='CSS1Compat'&&
document.documentElement&&
document.documentElement.scrollLeft！= null）{
clickX = evt.clientX + document.documentElement.scrollLeft;
clickY = evt.clientY + document。 documentElement.scrollTop;
}
if（evt.pageX || evt.pageY）{
clickX = evt.pageX;
clickY = evt.pageY;
}
alert（evt.type.toUpperCase（）+'鼠标事件： '
+'\ n pageX ='+ clickX
+'\ n pageY ='+ clickY
+'\\\
clientX ='+ evt.clientX
+'\\\
clientY ='+ evt.clientY
+'\ n screenX ='+ evt.screenX
+'\ n screenY ='+ evt.screenY
）
返回false;
}
$ b $当我点击下面的配置时，bi想要显示下拉列表。我正在获取坐标
谢谢
Hi
I need to show drop down dynamically after getting the position of click .
It mean i need to first find X and y coordinates of click event than show drop down(below that).
Like that
var select = document.createElement("select");
//Create a option element dynamically
var option = document.createElement("option");
..
Explain again :
On button click :i have 2 or three button i need to show menu option after click dynamically .so i thing first i have to calculate the x and y coordinate of click event.
i am doing like this .
i do like that ...
create region
<div id= 'menuOption'></div>
<li class="dropdown-toggle menu click_h" data-toggle="dropdown" href="javascript:void(0)" id="config" onClick='test()'>Configuration
</li>
function test(e){
var evt = e ? e:window.event;
var clickX=0, clickY=0;
if ((evt.clientX || evt.clientY) &&
document.body &&
document.body.scrollLeft!=null) {
clickX = evt.clientX + document.body.scrollLeft;
clickY = evt.clientY + document.body.scrollTop;
}
if ((evt.clientX || evt.clientY) &&
document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.scrollLeft!=null) {
clickX = evt.clientX + document.documentElement.scrollLeft;
clickY = evt.clientY + document.documentElement.scrollTop;
}
if (evt.pageX || evt.pageY) {
clickX = evt.pageX;
clickY = evt.pageY;
}
alert (evt.type.toUpperCase() + ' mouse event:'
+'\n pageX = ' + clickX
+'\n pageY = ' + clickY
+'\n clientX = ' + evt.clientX
+'\n clientY = ' + evt.clientY
+'\n screenX = ' + evt.screenX
+'\n screenY = ' + evt.screenY
)
return false;
}
i want to show drop down when i click configuration below this . i am getting the coordinates
Thanks
推荐答案
你可以轻松计算X坐标& Y-Coordinate使用以下代码使用jquery：
You can easily calculate the X-Coordinate & Y-Coordinate using below code using jquery:
var xCoordinate;
var yCoordinate;
（ document ）。 on（' mousemove'， function （ e）{
xCoordinate = e.pageX;
yCoordinate = e.pageY;
}）;
(document).on('mousemove', function (e) { xCoordinate = e.pageX; yCoordinate = e.pageY; });
此代码可以帮助您设置位置（您可以从上面的答案中找到xCoordinate& yCoordinate），如下所示：
this code can help you to set the position(where xCoordinate & yCoordinate you can find from the above answer ) like this:
document.getElementById("yourDropDownID").style.top = yCoordinate + "px";
document.getElementById("yourDropDownID").style.left = xCoordinate + "px";
您还要创建这些下拉菜单，这个 [ ^ ]可以帮助你，最好的运气：）
Also you want to create those dropdowns, this [^] can help you, Best of Luck :)
这篇关于获取点击位置后如何动态下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
