如何將圖像包裝在錨標簽中以獲得喜歡和不喜歡的功能

Question

我需要在錨標簽中包裹一個心形圖像，以實現喜歡和不喜歡功能。 我做了，但相應的圖像表現得像一個錨標簽。 當我點擊圖片時，我正在導航到我提到的特定鏈接。 我想要的是當我點擊圖像時，我只想調用一個喜歡和不喜歡的函數。

<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>

提前致謝

Answer 1

您需要在錨點標簽單擊時添加事件偵聽器，然后防止默認事件。

檢查這些鏈接：

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

TL; 博士

代碼將是這樣的

<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>