如何让绑定在inline onclick属性上的函数仅被触发一次？

问题原因说明 #

你写的jQuery绑定代码存在两个问题：

• 语法错误，回调函数的定义格式不符合规范
• 直接书写modal('#modal')会在绑定时立即执行函数，而不是等到点击时触发
  同时如果保留inline的onclick属性，即使绑定了新的点击事件，原inline逻辑仍然会执行，需要先移除或者覆盖。

可行实现方案 #

方案1：直接修改inline onclick（最简单，无需改动现有绑定逻辑） #

直接在调用modal函数后清空当前元素的onclick属性即可，代码如下：

<div class="container" onclick="modal('#modal'); this.onclick = null;"></div>

原理：第一次点击执行完逻辑后，直接移除元素本身的inline点击事件绑定，后续点击不会再触发对应函数。

方案2：使用jQuery内置的one方法（推荐使用jQuery的场景） #

jQuery提供了专门的.one()方法，绑定的事件只会触发一次，正确写法如下：

1. 先删除原HTML中的inline onclick属性
2. 写入如下JS代码：

$(".container").one("click", function() {
  modal('#modal');
  alert("The event happened!");
});

方案3：原生JS实现（无需依赖jQuery） #

如果不想用jQuery，原生addEventListener支持once配置项，绑定的事件只会触发一次：

1. 先删除原HTML中的inline onclick属性
2. 写入如下JS代码：

document.querySelector('.container').addEventListener('click', function() {
  modal('#modal');
}, { once: true });

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