Как преобразовать код jQuery в JavaScript?

Question

jQuery:

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $('#container'),
        top = $('#top-panel'),
        handle = $('#drag');

    handle.on('mousedown', function (e) {
        isResizing = true;
        lastDownX = e.clientY;
    });

    $(document).on('mousemove', function (e) {
        // we don't want to do anything if we aren't resizing.
        if (!isResizing) 
            return;
        var offsetRight = top.height() + (e.clientY - container.offset().top);

        top.css('top', offsetRight);
    }).on('mouseup', function (e) {
        // stop resizing
        isResizing = false;
    });
});

JavaScript:

var isResizing = false
// eslint-disable-next-line no-unused-vars
var lastDownX = 0

function resizeVerticallyInit () {
  var top = document.querySelector('#topology-container')
  var handle = document.querySelector('#drag')

  handle.addEventListener('mousedown', function (e) {
    isResizing = true
    lastDownX = e.clientY
  })

  document.addEventListener('mousemove', function (e) {
    // we don't want to do anything if we aren't resizing.
    if (!isResizing) {
      return
    }
    var offsetRight = top.height() + 20

    document.querySelector('#topology-container').style.top = offsetRight
  })

  document.addEventListener('mouseup', function (e) {
    // stop resizing
    isResizing = false
  })
}

mounted () {
  ...
  resizeVerticallyInit()
}

Как видите, я использую функцию JavaScript в Vue. js компоненте в смонтированном () метод жизненного цикла.

Пытался преобразовать, но ничего не вышло.

Прежде всего мне нужно было поставить:

// eslint-disable-next-line no-unused-vars
var lastDownX = 0

Я не знаю, почему он жалуется, что lastDownX не используется.

Второй - ошибка:

"[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'addEventListener' of null"

Он жалуется на:

  handle.addEventListener('mousedown', function (e) {
    isResizing = true
    lastDownX = e.clientY
  })

Может кто-нибудь помогите преобразовать его?

Answer 1

Первый из document.querySelector метод вернет null, если элемент отсутствует в DOM. Вы не можете вызвать addEventListener по нулю. В jQuery это сработало, потому что jquery создает отдельный объект (называемый jQuery объектом). Объект jQuery выглядит примерно так:

{
  0: {...} // HTMLElement reference
  length: 1
} // jQuery object

Этот объект предоставляет jQuery API, который имеет on метод обработки событий (доступный независимо от наличия фактического элемента DOM). В этом прелесть jQuery (и недостаток).

Метод селектора запросов, с другой стороны, возвращает HTMLElement. Если элемент отсутствует в DOM, возвращается null.

Теперь, предполагая, что элемент появится в DOM через определенное время, вы можете сделать две вещи:

1. Подождите, пока элемент появится в DOM, и как только он станет доступным, добавьте функцию прослушивания.
2. Используйте live события (делегирование событий) в JavaScript.

Я покажу вам второй подход:

setTimeout(() => {
  document.querySelector('#container').innerHTML = `<button id="btn">Click</button>`;
}, 3000);

document.addEventListener('click', (e) => {
  if (e.target.id === 'btn') {
    alert('Click works!');
  }
});

<div id="container">
  A button will appear after 3 seconds. However, click event would still work.
</div>

Как видите, я использую e.target, чтобы определить, какой элемент я щелкнул внутри документа (к которому я прикрепил слушателя). Как только условие совпадает, запускается alert. Это позволяет нам связывать события для элементов, которые изначально не присутствуют в DOM.