如何使用 html href 觸發按鈕？

Question

我的 HTML/CSS/Div 表中有以下代碼，並且 href 可以正常工作。 是否可以替換 href 代碼，以便在單擊此圖像時，而不是打開 URL，而是激活按鈕單擊？

工作代碼

<a class="test-link" href="https://www.example.com" target="_blank" rel="noopener">
  <img class="testgrey" src="./grey.svg" />
  <img class="test-white" src="./white.svg" />
</a>

單擊上面定義的圖像的期望結果：
此按鈕無需實際放置在 html 頁面上即可激活：

<a class="button button--small card-figcaption-button quickview" tabindex="0" data-product-id="113">Buy</a>

Answer 1

您可以將單擊處理程序添加到將單擊事件委托給按鈕的錨點。

 // Delagate the link click to the button click document.querySelector('#my-link').addEventListener('click', e => document.querySelector('#my-button').click()); // Handle button clicks document.querySelector('#my-button').addEventListener('click', e => console.log('button click...'));

 <a id="my-link" href="#">Click Me</a><br><br> <button id="my-button">I will be clicked programatically</button>

Answer 2

您可以將事件偵聽器直接附加到<a>元素並調用按鈕處理程序；

document.querySelector('.test-link').addEventListener('click', function(event){
   //prevent navigation
   event.preventDefault();
   event.stopPropagation();

   // call your button handler directly
   callButtonEventHandler();

   return false;
});

如果頁面上沒有按鈕，您將無法觸發按鈕單擊。 如果它在 javascript 中可用，則只能調用它的處理程序。