Question

当我点击它时，我试图在按钮附近显示一个浮动的div，并在我点击其中的“关闭”范围时隐藏div。这是我的代码：

    <style>
    #noteDiv {display:none; position: absolute;}
    </style> 

    <script>
    function showNote(e) {

      var x = 0, y = 0;
      if (!e) e = window.event;
      if (e.pageX || e.pageY) {
        x = e.pageX;
        y = e.pageY;
      }
      else if (e.clientX || e.clientY) {
        x = e.clientX + document.body.scrollLeft
          + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop
          + document.documentElement.scrollTop;
      }
    var noteDiv = document.getElementById("noteDiv");
      noteDiv.style.display = "block";
      noteDiv.style.left = (x+20)+"px";
      noteDiv.style.top = (y)+"px";
    }

    function hideNote() {
      document.getElementById("noteDiv").style.display = "none";
    }
    </script>

 <div id='noteDiv'>
 <div style="margin: 5px; float: right; font-size: smaller"><span  onclick="hideNote()">Close</span></div><br clear="all">

<div>Note Content</div>
 </div>

    <?php
    echo "<button type ='button' onClick = 'showNote();'>Note</button>";
    ?>

它会隐藏div，但是当我单击“Note”按钮时，noteDiv不会显示。

出了什么问题？

谢谢！迈克尔拉兹洛。我想我发现了这个问题，虽然我不知道如何处理它。

我相信这是javascript peice，因为如果我注释掉这一部分：

if (e.pageX || e.pageY) {
  x = e.pageX;
  y = e.pageY;
 }
  else if (e.clientX || e.clientY) {
  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
  }

按钮效果很好（尽管位置在屏幕的左下角，因为x和y为0）。

我错过了什么吗？

对于Sunil的建议，我暂时删除了类部分，并将onClick更改为onclick，现在回显良好，谢谢Sunil！

再次感谢Michael Laszlo！是的，你是对的！我需要给按钮一个ID或者e无法传递给该功能！现在我的代码也可以使用了！

我的页面上有很多这样的按钮，我需要生成一个var来验证它们，然后我认为它应该可行。如果有任何问题，那应该是另一个问题，哈哈，关于php。

非常感谢Michael Laszlo和Sunil，您对按钮设置ID并从浏览器检查代码的建议非常有帮助！我从你们那里学到了有价值的东西！

Answer 1

问题是在调用e时未定义事件showNote()。要确保将事件传递给showNote，请为该按钮指定一个ID，并在窗口加载时附加单击处理程序。

例如，您可以像这样定义按钮：

<button id="noteButton" type="button">Note</button>

然后将其添加到您的JavaScript：

window.onload = function () {
  document.getElementById('noteButton').onclick = showNote;
};

此方法在以下代码段中进行了演示。

＆＃13;

window.onload = function () {
  document.getElementById('noteButton').onclick = showNote;
};

function showNote(e) {
  var x = 0, y = 0;
  if (!e) e = window.event;
  if (e.pageX || e.pageY) { 
    x = e.pageX;
    y = e.pageY;
  } 
  else if (e.clientX || e.clientY) { 
    x = e.clientX + document.body.scrollLeft
      + document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop
      + document.documentElement.scrollTop;
  } 
  var noteDiv = document.getElementById("noteDiv");
  noteDiv.style.display = "block";
  noteDiv.style.left = (x+20)+"px";
  noteDiv.style.top = (y)+"px";
} 

function hideNote() { 
  document.getElementById("noteDiv").style.display = "none";
}

＆＃13;

#noteDiv {
  display:none;
  position: absolute;
}

＆＃13;

<div id='noteDiv'>
  <div style="margin: 5px; float: right; font-size: smaller">
    <span onclick="hideNote()">Close</span>
  </div>
  <br clear="all">
  <div>Note Content</div>
</div>

<button id="noteButton" type="button">Note</button>

＆＃13;

Answer 2

它应该可以工作，但请记住，您需要单击屏幕上的特定区域，而不是在任何地方关闭注释。您可以通过使用边框设置样式来使用户显而易见。

您可以看到一个演示，以证明它在此处有效：https://jsfiddle.net/g43j5jdp/1/

我在关闭区域添加了边框，如下面的代码所示。

<div style="margin: 5px; float: right; font-size: smaller;
border:1px solid red;"><span onclick="hideNote()">Close</span>

注意您问题的最快解决方案是使用浏览器的开发者工具。否则你最终可能会花太多时间在这上面。

另外请阅读此stackoverflow帖子，这可能会帮助您摆脱渲染的HTML中显示的PHP代码$ classStr：Why is my PHP source code showing? 您的问题似乎与php配置有关。

在按钮附近显示浮动div

2 个答案: