为何onClick事件在组件渲染后立即触发？

问题原因 #

你当前的写法存在两个核心问题：

• 内联onclick语法错误：原生HTML的onclick属性需要直接编写可执行的JavaScript代码，而你使用的{this.shareMobile}或{() => ...}是React/Angular等框架的JSX模板语法，原生环境下这种写法会被解析为无效代码，甚至引发意外执行。
• 上下文不匹配：即便语法正确，字符串模板里的this和类内部的this并非同一上下文——按钮插入DOM后，onclick中的this指向按钮元素本身，而非Sharer类，根本无法正确调用静态方法shareMobile。

另外，如果你曾尝试onclick="this.shareMobile()"这类写法，函数会立即执行的原因是：HTML解析时，()会直接触发函数调用，而非绑定点击事件。

正确解决方案 #

放弃内联onclick，改用事件监听的方式实现，具体步骤如下：

1. 修改createBlocks方法，仅返回不含事件绑定的HTML结构：

static createBlocks = () => {
    const block = `<button class="share__button btn">test</button>`;
    return block;
};

2. 在render方法中，插入DOM后获取按钮元素，再绑定点击事件：

static render = () => {
    const block = this.createBlocks();
    if (block) {
        document.body.insertAdjacentHTML('beforeend', block);
        // 获取刚插入的按钮元素
        const shareBtn = document.querySelector('.share__button:last-child');
        // 绑定静态方法作为点击事件处理函数
        shareBtn.addEventListener('click', this.shareMobile);
        this.close();
    }
};

这种方式的优势：

• 避免内联事件带来的上下文混乱与语法问题
• 事件逻辑与DOM结构分离，代码更易维护
• 确保shareMobile方法能被正确调用（此处this指向Sharer类，可直接访问静态方法）

如果需要批量绑定多个按钮，还可以使用事件委托：给父容器绑定事件，通过判断目标元素的类名触发对应逻辑，这种方式更高效。

内容的提问来源于stack exchange，提问作者aroh