как я могу восстановить удаленный атрибут onClick?

Question

В функции addBlocker я удалил атрибут onClick с кнопки. В функции removeBlocker мне нужен этот атрибут обратно вместе с функцией обработчика, которая была реализована в html-файле.

(я попробовал другой подход, где использовал element.style.pointerEvents = 'none') но с этим я не могу получить значения clientX и clientY из события. Есть ли способ получить clientX и clientY, когда для pointEvents установлено значение none?

document.addEventListener('mouseover', function(e) {
    if (e.target.type === 'button') {
        newBody[i].removeAttribute('onClick');
    }
    newBody[i].addEventListener('click', e => {
        e.preventDefault();
    });
    const { clientX, clientY } = e;
    // newBody[i].style.pointerEvents = 'none';
    // const elementMouseIsOver = document.elementFromPoint(clientX, clientY);
    let elementMouseIsOver = document.querySelectorAll(':hover');
    elementMouseIsOver = elementMouseIsOver[elementMouseIsOver.length - 1];
    console.log({ clientX, clientY, elementMouseIsOver });
});

Я ожидаю вернуть удаленный атрибут onClick, когда я запускаю другую функцию или найду способ получить e.clientX и e.clientY, когда style.pointEvents равен none.

Answer 1

Если вам потребуется восстановить значение атрибута позже, вам придется извлечь его, прежде чем удалить атрибут и сохранить его где-либо.

Объявить место для его хранения:

var buttonClick;

Где вы его удаляете

buttonClick = newBody[i].getAttribute('onClick');

Где вы его восстанавливаете:

newBody[i].setAttribute('onClick', buttonClick);

Вы можете даже сохранить его на самом элементе, используя свойство expando (в основном, свойство с неизвестным именем, в котором вы точно уверены, не будет конфликтовать ни с кем другим):

newBody[i].__my_blocker_buttonClick = newBody[i].getAttribute('onClick');

Тогда где вы его восстанавливаете:

newBody[i].setAttribute('onClick', newBody[i].__my_blocker__buttonClick);

Answer 2

Попробуйте добавить событие на mouseleave

document.addEventListener('mouseleave', function(e) {
  if (e.target.type === 'button') {
    newBody[i].setAttribute('onClick', functionName);
  }
})