javascript - 同じタグ内に 2 つの onClick を持つ

Question

これは「イベント バブリング」に関係している可能性がありますが、同じタグ内に 2 つの onClick イベント (1 つは img を展開し、もう 1 つは元のサイズに戻す) を設定するにはどうすればよいですか?

例えば

<img class="a1" width="140" height="140" onClick="this.width=420;this.height=560;" onClick="this.width=140;this.height=140;" />

現在は 2 番目の onClick が機能しません。

前もって感謝します！

Answer 1

JavaScriptではありませんが、アイデアは得られます

onclick(){
    isClicked ^= true

    if(isClicked){
        //do something
    }
    else{
        //do something else
    }
}

Answer 2

同じタグに2つの等しい属性を持つことはできませんが、この方法でやりたいことができます(テストされていません... =D ):

JS

window.addEventListener("load", function(){
  var img = document.getElementById("your_img");
  img.onclick = function(){
    var size = this.getAttribute("data-size");
    if(size === "big"){
      this.style.width = "140px";
      this.style.height = "140px";
      this.setAttribute("data-size", "small");
    } else {
      this.style.width = "560px";
      this.style.height = "420px";
      this.setAttribute("data-size", "big");
    }
  }
});

HTML

<img id="your_img" src="anything.png" />

CSS

#your_img{
  height:140px;
  width:140px;
}