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的{{1}}上，并在由于事件冒泡而单击按钮时添加后缀叫了两次。

如果需要包装功能，也可以window bind并使用箭头功能。

this

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

Javascript：onclick事件触发两次

1 个答案:

由于包装函数会发生什么？