javascript click 事件处理程序在不点击的情况下触发答案

【问题标题】：javascript click event handler fires without clickingjavascript click 事件处理程序在不点击的情况下触发
【发布时间】：2017-03-27 09:39:40
【问题描述】：

为什么这个函数在没有点击指定按钮的情况下被触发？我看了一些类似的问题，但没有一个处理这个代码结构（可能是我失踪的明显原因......）。

document.getElementById("main_btn").addEventListener("click", hideId("main");

function hideId(data) {
    document.getElementById(data).style.display = "none";
    console.log("hidden element #"+data);
}

【问题讨论】：

使用 html onClick 标签，我应该发布答案吗？

标签： javascript function event-handling click

【解决方案1】：

你直接调用它。

document.getElementById("main_btn").addEventListener("click", hideId("main");

你应该在回调中这样做。

document.getElementById("main_btn").addEventListener("click", function (){
    hideId("main");
});

【讨论】：

这行得通，谢谢！现在一切都说得通了，我多次看到这个解决方案，但我不明白为什么你必须在另一个函数中调用该函数。但我猜您是在告诉事件处理程序在单击后执行该函数，而不是仅仅将其放在那里自行执行。

【解决方案2】：

这段代码执行你的函数hideId("main")你应该只传递回调的名字：

document.getElementById("main_btn").addEventListener("click", hideId);

function hideId(event) {
    var id = event.target.srcElement.id; // get the id of the clicked element
    document.getElementById(data).style.display = "none";
    console.log("hidden element #"+data);
}

【讨论】：

【解决方案3】：

document.getElementById("main_btn").addEventListener("click", hideId.bind(null, "main");

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。