如何使用這種html代碼單擊元素//按鈕

Question

<span id="cart-update">
   <span class="cart-button">add to cart</span>
</span>

我如何點擊這個按鈕

我已經嘗試了document.getElementById('cart-update').click(); 和document.getElementsByClassName('cart-button').click();

Answer 1

在較新的瀏覽器上，您可以執行以下操作來觸發事件：

var event = new Event("click", {"bubbles":true, "cancelable":false});
element.dispatchEvent(event);

如果要支持較舊的瀏覽器，請嘗試以下代碼：

function fireEventOnElement(event_name, element, bubbles, cancelable) {
    if (typeof Event != "undefined") {
        console.log("Bla");
        var evt = new Event(event_name, {"bubbles":bubbles, "cancelable":cancelable});
        element.dispatchEvent(evt);
    } else if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event_name, bubbles, cancelable);
        element.dispatchEvent(evt);
    } else {
        element.fireEvent("on" + event_name);
    }
}

像這樣使用它： fireEventOnElement("click", document.getElementById('cart-update'), true, false);

編輯：我更改了代碼，因為initEvent已過時。

Answer 2

嘗試使用addEventListener()並通過處理函數傳遞事件：

getElementsByClassName()返回HTMLCollection 。 您必須使用適當的索引：

 document.getElementsByClassName('cart-button')[0].addEventListener('click', function(){ alert('You have clicked'); }); 

 <span id="cart-update"> <span class="cart-button">add to cart</span> </span> 

雖然我更喜歡querySelector() ，它將返回第一個匹配的元素：

 document.querySelector('.cart-button').addEventListener('click', function(){ alert('You have clicked'); }); 

 <span id="cart-update"> <span class="cart-button">add to cart</span> </span> 

您可以像以下方式使用onclick ：

 document.querySelector('.cart-button').onclick = function(){ alert('You have clicked'); }; 

 <span id="cart-update"> <span class="cart-button">add to cart</span> </span> 

Answer 3

getElementsByClassName返回一個集合，從中獲取元素並傳遞index ，並使用addEventListener添加任何事件

 document.getElementsByClassName('cart-button')[0].addEventListener('click', function(e) { let getText = e.target.innerHTML; console.log(getText) }) 

 <span id="cart-update"> <span class="cart-button">add to cart</span> </span>