javascript - 如何模拟点击?

Question

我在网页上有一个元素。

<div class="profile-action profile-action--lg profile-action--color-yes profile-action--filled   js-profile-header-vote-yes js-profile-header-vote" data-choice="yes" role="button">                
    <div class="profile-action__icon">                    
        <i class="icon icon--stretch">                        
            <svg class="icon__svg">                             
                <use xlink:href="#floating-action-yes"></use>                                                     
            </svg>  
        </i>                
    </div>            
</div> 

我正在尝试通过以下代码模拟点击事件。

document.getElementsByClassName("js-profile-header-vote-yes")[0].click() 

它不会模拟对该元素的任何点击。我究竟做错了什么？

编辑：我尝试过 jQuery 和 dispatchEvent，它们也不起作用。我也尝试过硒，它可以工作，但这不是我想要的。

Edit2：我不想处理点击事件，我想模拟点击方法。

标签： javascriptdomeventsmethods

Answer 1

.click()工作得很好，但除非有一个eventListener附加到元素，否则什么都不会发生。

document.getElementsByClassname()除非您特别需要 live ，否则我也会避免使用HTMLCollection。document.querySelector('.classname')在这里更合适，并返回一个NodeList更可预测的静态，因为它不随 DOM 更新。

const buttonDiv = document.querySelector('.js-profile-header-vote-yes');

buttonDiv.addEventListener('click', () => console.log('clicked'));

buttonDiv.click();

<div class="profile-action profile-action--lg profile-action--color-yes profile-action--filled   js-profile-header-vote-yes js-profile-header-vote" data-choice="yes" role="button">                
    <div class="profile-action__icon">                    
        <i class="icon icon--stretch">                        
            <svg class="icon__svg">                             
                <use xlink:href="#floating-action-yes"></use>                                                     
            </svg>  
        </i>                
    </div>            
</div>