停止 onclick 事件处理程序答案

【问题标题】：stopping onclick event handler停止 onclick 事件处理程序
【发布时间】：2020-10-16 02:00:49
【问题描述】：

我现在在稍微不同的上下文中使用一些工作代码。工作部分是我使用对象 onclick 事件来调出一个表单来发送电子邮件。当它在 HTML 页面中时，它工作正常。我会有很多这样的按钮：

<button id="mail-c1" onclick="initMailFormButton(this.id, 'someone','somedomain.com','a subject')">Someone's Name</button>

整个表单是用 javascript 创建的，并且有自己的提交和取消按钮，但在按钮元素中。为了能够在表单中输入数据，我需要杀死 onclick 事件，然后在我提交或取消电子邮件后恢复它。 onclick 处理程序开始于：

function initMailFormButton(mailId, eName, eDomain, eSubject) {
    myFormLocation = document.getElementById(mailId);
    stopFormClick(myFormLocation);

stopFormClick 函数在哪里：

function stopFormClick(myFormLocation) {
    saveOnclick = myFormLocation.onclick;
    myFormLocation.onclick = null;
}

这有一个错误，它不能处理同时打开多个表单的人，但这不是我最关心的问题。我会在本次讨论之外修复它。

生成的表单中的提交和取消按钮都恢复了 onclick 事件处理程序，因此您可以非常愉快地多次打开和关闭表单。

我的新案例是我正在从数据库生成 HTML 页面。我正在使用 HTML 数据集来存储以前的硬编码信息，如下所示：

    emailButton.setAttribute("data-mailname",   emailName);
    emailButton.setAttribute("data-maildomain", emailDomain);
    emailButton.addEventListener("click", function() { initMailFormButton(this.id, this.dataset.mailname, this.dataset.maildomain, ""); }, false);

检索到的信息是正确的，并且表单出现在正确的位置。但是，我无法输入信息，因为当我单击第一个表单字段并生成另一个表单时，原始的 onclick 处理程序会启动...

我唯一的线索是，当我查看保存在静态 HTML 页面中的 onclick 事件的值时，它具有预期值，但在生成的页面中为 null。我觉得这很令人困惑，因为我将（唯一）元素 id 传递给例程，所以它应该到达正确的元素。

谁能帮我解决这个问题。同时，我将修复上面提到的事件处理程序错误。

【问题讨论】：

标签： javascript event-handling dom-events

【解决方案1】：

好的。所以就是click和onclick是有区别的。未设置 onclick 事件处理程序，因此它为空。我将单击事件侦听器的设置更改为将 onclick 属性设置为：

    emailButton.onclick = 
        function() { initMailFormButton(this.id, this.dataset.mailname, this.dataset.maildomain, ""); };

一切正常。

为了处理我之前提到的限制，我将 saveOnclick 变量设置为一个由按钮 ID 键入的关联数组。现在人们可以根据需要点击任意数量的按钮 - 尽管想要拥有多个按钮可能很少见。

【讨论】：