「いいね」と「嫌い」の機能のためにアンカータグ内で画像をどのようにラップできますか

2020-04-01 javascript html image anchor

好きな機能と嫌いな機能のために、ハート型の画像をアンカータグ内にラップする必要があります。私はしましたが、対応する画像はアンカータグのように動作しています。画像をクリックすると、言及している特定のリンクに移動します。 私が欲しいのは、画像をクリックしたときに、いいね!といいね!の関数を呼び出したいだけです。

ご参考までに、私が欲しいものを画像で確認できます

<a>
  <div className="hidden">
    <div className="hx-243px bg-cover transitionAll-0p3 slide-item-img no-selectable" style={{backgroundImage: `url(${thumb})`}}> 
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgATURjH/98kkVJUXIjYg3griojiRcEN6sEFQuYlnYMeSjxYRRBPntzSg3oSRPBgQ==" style={{float: "right", padding: "5px", display: "inline-block"}}></img>
    </div>
  </div>
</a>

前もって感謝します

Answers

アンカータグのクリック時にイベントリスナーを追加し、デフォルトのイベントを防止する必要があります。

これらのリンクを確認してください:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

TL; DR

コードはそのようなものになります

<a href="javascript:;" id="like">
  <img src="heart.png"/ alt="like">
</a>

<script>
  var likeButton = document.getElementById('like');

  likeButton.addEventListener('click', function (event) {
    event.preventDefault();
    // actual like implementation
  });
</script>

Related