продолжайте изменять размер элемента, пока кнопка мыши нажата

Question

как непрерывно изменять размер элемента, пока кнопка мыши нажата?
Я пытался с mousedown - безуспешно.

$('button').on('mousedown', function(){
let targ = $('.targ');
let x = targ.height();
x++;
targ.height(x);
});

.targ{background:orange;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>PRESS</button>
<br><br>
<div class='targ'>LOREM</div>

Answer 1

вы можете добавить setInterval() к вашему событию mousedown и очистить его при mouseup

вот рабочий пример установки его на 50 миллисекунд:

    var interval;
$('button').on({
  mousedown: function() {
    interval = setInterval(function() {
      let targ = $('.targ');
      let x = targ.height();
      x++;
      targ.height(x);
    }, 50);

  },
  mouseup: function() {
    window.clearInterval(interval);
  }
});

Рабочая скрипта также здесь: https://jsfiddle.net/qytd5h1n/2/

надеюсь, это поможет:)

Answer 2

Вы можете отслеживать 3 события: «включение» функции изменения размера при щелчке мыши (щелчок) и отключение функции изменения размера с помощью mouseup или mouseleave. Используйте setInterval для проверки того, был ли щелчок мыши отпущен или перемещен из элемента, назначив его (тайм-аут) переменной, чтобы вы могли прервать его в обоих других событиях (mouseup и mouseleave)