JSP：将 DIV 定位在特定坐标处不起作用

Question

我正在尝试在输入框的坐标上放置一个Div。单击输入框，将启用 DIV 并加载值，并且 DIV 上的任何选择都必须将值设置为输入框。一切正常，除了输入框不是位于坐标上，而是位于页面顶部。<div class="mRow"><label for="SS">Special Subjects:</label><span class="numLbls">1. </span><input type="text" name="ade" value="<%=ade[0]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/><span class="numLbls">2. </span><input type="text" name="ade" value="<%=ade[1]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/><span class="numLbls">3. </span><input type="text" name="ade" value="<%=ade[2]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/></div>divSpec 是：<div id="divSpec" class="lookupTable" onClick="hideThis(this.id)">    <table>        <%        for (int i = 0; i < luSpec.size(); i++)        {            lu = (LookupTableBean) luSpec.get(i);            %>            <tr>                <td><%=lu.getCode()%>.</td>                <td><a href="javascript: setCode('divSpec', '<%=lu.getCode()%>')" ><%=lu.getDescr()%></a></td>            </tr>        <%        }%>    </table></div>用于查找的 css 是：.lookupTable{  display:none;  padding:5px;  z-index:10;  font-size: 10px;   position: absolute;  border: 2px solid #933;   background-color:white;   width: 220px;   height:180px;   overflow:auto;}Javascript// Detect if the browser is IE or not.// If it is not IE, we assume that the browser is NS.var IE = document.all?true:falsevar codeEl;// If NS -- that is, !IE -- then set up for mouse captureif (!IE) document.captureEvents(Event.MOUSEMOVE)// Set-up to use getMouseXY function onMouseMovedocument.onmousemove = getMouseXY;}任何建议请。我已经添加了警报 showCodeLookup（），它给了我正确的坐标，比如 1036 表示 Y，536 表示 X。

Answer 1

我已经在Chrome上测试了您的代码，发现在您的js代码中并且是空的或未定义的。因此，当您将这些值分配给 div 时，它并未将其定位到所需的坐标。相反，我已经在您的js代码中进行了某些更改，如下所示：document.Show.sMouseY.valuedocument.Show.sMouseX.valuedivSpec

var IE = document.all ? true : false

var codeEl;

// If NS -- that is, !IE -- then set up for mouse capture

if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove

document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s

var tempX = 0;//declare 

var tempY = 0;//declare

var mouseX = 0;

var mouseY = 0;

//var frm = document.dashboardSearchForm;

function getMouseXY(e) {

  if (IE) { // grab the x-y pos.s if browser is IE

    tempX = event.clientX + document.body.scrollLeft

    tempY = event.clientY + document.body.scrollTop

  } else { // grab the x-y pos.s if browser is NS

    tempX = e.pageX

    tempY = e.pageY

  }

  // catch possible negative values in NS4

  if (tempX < 0) {

    tempX = 0

  }

  if (tempY < 0) {

    tempY = 0

  }

  return true;

}

function showCodeLookup(el, divName) {

  //Hide any lookup tables that are displayed first

  document.getElementById("divSpec").style.display = "none";

  var divCodes = document.getElementById(divName);

  codeEl = el;

  computeCoordinates();

  divCodes.style.display = "block";

  divCodes.style.left = tempX; //(change here)assigning coordinate found

  divCodes.style.top = tempY; //(change here)

}

function setCode(divName, code) {

  var divEl = document.getElementById(divName);

  codeEl.value = code;

  divEl.style.display = "none";

}

function computeCoordinates() {

  var isIE = document.all ? true : false;

  var ScrollTop = document.body.scrollTop;

  var _x = tempX;

  var _y = tempY;

  if (ScrollTop == 0) {

    if (window.pageYOffset)

      ScrollTop = window.pageYOffset;

    else

      ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;

  }

  if (isIE) {

    _x = tempX + document.body.scrollLeft;

    _y = tempY + ScrollTop;

  }

  tempX = _x;//change here 

  tempY = _y;//change here

}

function hideThis(id) {

  document.getElementById(id).style.display = "none";

}

（上面的代码已经在chrome上进行了测试，并且可以按接受的方式工作）

工作代码 ：

var IE = document.all ? true : false

var codeEl;

// If NS -- that is, !IE -- then set up for mouse capture

if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove

document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s

var tempX = 0; //declare 

var tempY = 0; //declare

var mouseX = 0;

var mouseY = 0;

//var frm = document.dashboardSearchForm;

function getMouseXY(e) {

  if (IE) { // grab the x-y pos.s if browser is IE

    tempX = event.clientX + document.body.scrollLeft

    tempY = event.clientY + document.body.scrollTop

  } else { // grab the x-y pos.s if browser is NS

    tempX = e.pageX

    tempY = e.pageY

  }

  // catch possible negative values in NS4

  if (tempX < 0) {

    tempX = 0

  }

  if (tempY < 0) {

    tempY = 0

  }

  return true;

}

function showCodeLookup(el, divName) {

  //Hide any lookup tables that are displayed first

  document.getElementById("divSpec").style.display = "none";

  var divCodes = document.getElementById(divName);

  codeEl = el;

  computeCoordinates();

  divCodes.style.display = "block";

  divCodes.style.top = tempX +'px'; //(change here)assigning coordinate found

  divCodes.style.left = tempY +'px'; //(change here)

}

function setCode(divName, code) {

  var divEl = document.getElementById(divName);

  codeEl.value = code;

  divEl.style.display = "none";

}

function computeCoordinates() {

  var isIE = document.all ? true : false;

  var ScrollTop = document.body.scrollTop;

  var _x = tempX;

  var _y = tempY;

  if (ScrollTop == 0) {

    if (window.pageYOffset)

      ScrollTop = window.pageYOffset;

    else

      ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;

  }

  if (isIE) {

    _x = tempX + document.body.scrollLeft;

    _y = tempY + ScrollTop;

  }

  tempX = _x; //change here 

  tempY = _y; //change here

}

function hideThis(id) {

  document.getElementById(id).style.display = "none";

}

.lookupTable

{

  display:none;

  padding:5px;

  z-index:10;

  font-size: 10px; 

  position: absolute;

  border: 2px solid #933; 

  background-color:white; 

  width: 220px; 

  height:180px; 

  

}

<html>

<body>

<div class="mRow">

  <label for="SS">Special Subjects:</label>

  <span class="numLbls">1. </span><input type="text" name="ade" value="<%=ade[0]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />

  <span class="numLbls">2. </span><input type="text" name="ade" value="<%=ade[1]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />

  <span class="numLbls">3. </span><input type="text" name="ade" value="<%=ade[2]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />

</div>

<div id="divSpec" class="lookupTable" onClick="hideThis(this.id)">

  <table>

   ddddddddd

  </table>

</div>

</body>

</html>