javascript - HTML画像のクリックイベントでaspxページのJavaScript関数を呼び出しているときに、Webページが更新されるのはなぜですか？

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

inputタグは、リロードをトリガーする他の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;
   }