Javascript: событие onclick срабатывает дважды

Question

Есть ли способ изменить обработчик onclick внутри себя, не вызывая его дважды?

class Xfoo extends HTMLElement {
  constructor() { super(); }

  foobar() {
    alert();
    this.onclick = this.foobar;
} }

let x = document.getElementById('xfoo');
x.onclick = function() { this.foobar(); };

При щелчке элемента xfoo появляются два предупреждения.

Answer 1

Только не используйте функцию-обертку, напрямую назначьте ее bar.

let foo = document.getElementById("foo");
foo.onclick = function bar() {
  alert();
  this.onclick = function(){bar()};
};

<button id="foo">foo</button>

Что происходит из-за функции оболочки?

Когда вы устанавливаете onclick на function(){bar()}.вы изменяете привязку this. И она присоединяет событие к this, а также this, что составляет window, и послесловия, когда вы нажимаете кнопку из-за всплывающего события, событие вызывается два раза.

Вы также можете bind this и использовать функцию стрелки, если вам нужна функция обертки.

let foo = document.getElementById("foo");
foo.onclick = function bar() {
  alert();
  this.onclick = () => bar.bind(this)();
};

<button id="foo">foo</button>