javascript - 为什么当我在我的 aspx 页面中的 html 图像点击事件中调用 JavaScript 函数时，我的网页会刷新？

Question

我在 mt aspx 页面中使用 html 图像控件，并且我在该控件的单击事件上调用 javascript 函数，但是在这里我的页面每次单击时都会刷新

这是我的代码：

<input id="wbsnew1" type="image" value="New" onclick="showHideDiv()" src="images/New.png" />

这是我的javascript代码：

function showHideDiv() {
        document.getElementById("newdata2").style.display = "block";
    } 

“newdata2”是一个 div

Answer 1

<input id="wbsnew1" type="image" value="New" onclick="return showHideDiv();" src="images/New.png" />

function showHideDiv() {
    document.getElementById("newdata2").style.display = "block";
    return false;
 } 

Answer 2

<input type="image" />元素用于提交表单（在 ASP.NET 中相当于回发）。

你有几个选择：

1. （最好）将<input>标签替换为<img />. 其他属性相同（除了type不需要该属性）。
2. 添加return false到onclick处理程序：<input onclick="showHideDiv(); return false;".

3. 从方法本身返回false值并将returnkeywork添加到方法中

   <input onclick="return showHideDiv();" />
   
   function showHideDiv() {
       ....
       return false;
   }
   

Answer 3

我想输入标签位于触发重新加载的其他 html 元素内。尝试停止冒泡：

<input id="wbsnew1" type="image" value="New" onclick="showHideDiv(event)" src="images/New.png" />

function showHideDiv(event) {
        event.stopPropagation();
        document.getElementById("newdata2").style.display = "block";
    } 

Answer 4

应用函数后尝试返回，如下代码：

`<input id="wbsnew1" type="image" value="New" onclick="showHideDiv(); return false;" src="images/New.png" />`  

也让你的函数返回 false

function showHideDiv() {  
     document.getElementById("newdata2").style.display = "block";

return false;
}