Javascript onclick事件工作显示，但不隐藏

Javascript onclick event working to show but not to hide

本文关键字：隐藏 显示 onclick 事件 工作 Javascript      更新时间：2023-09-26

这是一个非常基本的脚本，但基本上我在点击时显示一个div，然后在稍后点击按钮标题时隐藏该div。我以前这样做过，效果非常好。我就是不知道我做错了什么，或者我正在做错什么。就像我说的，第一个click()完美显示，第二个hide()什么也不做

JS: 

function click1(){
    document.getElementById('form1').style.display='block';
}
function hide1(){
    document.getElementById('form1').style.display='none';
}
HTML: 

<tbody>
 <tr>
  <td style="cursor:pointer;" onclick="click1()">
   <div id="form1" style="display:none;">
    <form action="enter.php" method="post">
     <label for="entry1">Entry1</label>
      <input type="text" id="entry1" name="entry1" size="15" /><br>
     <label for="entry2">Entry2</label>
      <input type="text" id="entry2" name="entry2" size="15"/><br>
     <label for="entry3">Entry3</label>
      <input type="text" id="entry3" name="entry3" size="15"/><br>
      <input type="hidden" name="id" value="1" /><br>
      <input type="hidden" name="table" value="table" /><br>
      <input type="submit" value="GO!" />
      <input type="button" value="later" onClick="hide1()"/>
    </form>
   </div><sub>1</sub>
  </td>
 </tr>
</tbody>

该按钮是td的子按钮，因此这两个函数将在相同的单击事件中触发。

将此添加到hide1(): 

function hide1(e){
    document.getElementById('form1').style.display='none';
    e.stopPropagation();
}

这将防止事件冒泡DOM并触发td事件。

您还需要在单击处理程序中传递事件:onClick="hide1(event)"

演示:http://jsfiddle.net/7PT8U/

你可以这样做

 <tbody>
 <tr>
  <td style="cursor:pointer;">
   <div id="form1" style="display:none;">
    <form action="enter.php" method="post">
     <label for="entry1">Entry1</label>
      <input type="text" id="entry1" name="entry1" size="15" /><br>
     <label for="entry2">Entry2</label>
      <input type="text" id="entry2" name="entry2" size="15"/><br>
     <label for="entry3">Entry3</label>
      <input type="text" id="entry3" name="entry3" size="15"/><br>
      <input type="hidden" name="id" value="1" /><br>
      <input type="hidden" name="table" value="table" /><br>
      <input type="submit" value="GO!" />
      <input type="button" value="later" onClick="hide1()"/>
    </form>
   </div><sub onclick="click1()">1</sub>
  </td>
 </tr>
</tbody>
相关文章：