为什么当我在我的 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 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;
}

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 type="image" />元素用于提交表单（在 ASP.NET 中相当于回发）。

你有几个选择：

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

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

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