如何使用纯 javascript 刺激 click()

【问题标题】：How to stimulate a click() using plain javascript如何使用纯 javascript 刺激 click()
【发布时间】：2022-01-06 01:33:35
【问题描述】：

我有一个非常基本的代码：

if(screen.width > 600) {
  document.querySelector('.toggle-sidenav').click();
}

只要屏幕大于 600 像素，我就想点击具有 toggle-sidenav 类的 div，但 Javascript 中的 .click() 方法不起作用。

我不想使用 jQuery。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript dom dom-events

【解决方案1】：

您可以使用dispatchEvent。该示例在此处显示调整屏幕大小，该函数获取传递给另一个函数的宽度，然后 dispatchEvent.. 这里该函数使用 clientWidth 来显示工作，但在您的代码中您可以使用任何其他键

const sideNav = document.querySelector('.toggle-sidenav');
sideNav.addEventListener('click', () => {
  alert('Click Triggered')
})
window.addEventListener('resize', (e) => {
  const width = document.body.clientWidth;

  triggerClick(width)
})

function triggerClick(width) {
  if (width > 600) {
    console.log(width)
    sideNav.dispatchEvent(new Event('click'))
  }
}

<div class='toggle-sidenav'>
  Test
</div>

【讨论】：