Блог

Главная - Вопросы по программированию - Как имитировать удержание нажатия на класс кнопок

Как имитировать удержание нажатия на класс кнопок

#javascript #jquery

#javascript #jquery

Вопрос:

Как я могу имитировать удержание нажатия на кнопку? где я могу использовать elements.[0].click(); для имитации щелчка, как я могу сделать так, чтобы он удерживал кнопку, например, 5 секунд, а не просто отпускал ее?

пример кода

 <!DOCTYPE html>
<html>
<body>

<button class="button" id="button">You released the mouse button.</p>

<script>
document.getElementById("button").onmousedown = function() {mouseDown()};
document.getElementById("button").onmouseup = function() {mouseUp()};

function mouseDown() {
  document.getElementById("button").innerHTML = "The mouse button is held down.";
}

function mouseUp() {
  document.getElementById("button").innerHTML = "You released the mouse button.";
}
</script>

</body>
</html>

Комментарии:

1. Вы можете использовать developer.mozilla.org/en-US/docs/Web/API/EventTarget /… чтобы отправить событие наведения курсора мыши, подождите 5 секунд и отправьте событие наведения курсора мыши.

2. С помощью jQuery вы, вероятно, могли бы сделать то же самое с trigger('mousedown') и то же самое для наведения курсора мыши

3. Для этого вам не нужен jQuery. Просто посетите youmightnotneedjquery.com и искать trigger .

Ответ №1:

Вы можете создавать события и причины также MouseEvents самостоятельно.

В современных браузерах вы можете просто сделать это, вызвав конструктор нужного типа события или вызвав document.createEvent('<EventName>')
https://developer.mozilla.org/en-US/docs/Web/API/Event

Затем вы можете запустить это событие для любого элемента, который вам нравится, используя dispatchEvent()
https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent

 document.getElementById("button").addEventListener('mousedown', mouseDown);
document.getElementById("button").addEventListener('mouseup', mouseUp);

function mouseDown() {
  document.getElementById("button").innerHTML = "The mouse button is held down.";
}

function mouseUp() {
  document.getElementById("button").innerHTML = "You released the mouse button.";
}


// bind click event on simulate button
document.querySelector('.simulate').addEventListener('click', () => {
  console.log('start');
  simulateMouseEvent(document.getElementById("button"), 'mousedown')
  setTimeout(() => {
    console.log('end');
    simulateMouseEvent(document.getElementById("button"), 'mouseup')
  }, 5000)
})

// capsulate the event trigger stuff
// see: http://youmightnotneedjquery.com/
function simulateMouseEvent(el, eventName){
  let event;
  if (window.MouseEvent amp;amp; typeof window.MouseEvent === 'function') {
    event = new MouseEvent(eventName);
  } else {
    event = document.createEvent('MouseEvent');
    event.initMouseEvent(eventName);
  }

  el.dispatchEvent(event);
}  
 <!DOCTYPE html>
<html>
<body>

  <p>
    <button class="button" id="button">You released the mouse button.</button>
  </p>

  <p>
    <button class="simulate">simulate</button>
  </p>

</body>
</html>