如何使用这种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>