如何使用普通 javascript 刺激 click()

Question

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

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

一旦屏幕 > 600px，我想单击具有 toggle-sidenav 的 class 但 [=30= 中的 .click() 方法的 div ] 不工作。

我不想使用 jQuery。

我怎样才能做到这一点？

Answer 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>

如何使用普通 javascript 刺激 click()

How to stimulate a click() using plain javascript

javascript

dom

dom-events