為什么當我在我的 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; }