javascript - Onclick 在启动时激活然后不执行任何操作

Question

我遇到了这个奇怪的问题，我试图创建按钮然后为它们分配一个 onclick 事件。 onclick 函数在页面加载后立即启动，然后当我单击它时不执行任何操作。

var walk    = require('walk');
var files   = [];

//Scan
var walker  = walk.walk('./src/scripts/plugins', { followLinks: false });
walker.on('file', function(root, stat, next) {
    listPluginE(stat.name)
    next();
});

var walker  = walk.walk('./src/scripts/disabledplugins', { followLinks: false });
walker.on('file', function(root, stat, next) {
    listPluginD(stat.name,"disabled")
    next();
});

function listPluginE(dir) {
    //Text
    var dir = arguments[0]
    var type = "enabled"
    var para = document.createElement("p");
    var t = document.createTextNode(dir);
    para.className = type;
    para.appendChild(t);
    document.getElementById('enabledSpace').appendChild(para);
    //Disable
    var disable = document.createElement("button");
    var t = document.createTextNode("Disable");
    disable.className = "disable";
    disable.onclick = test()
    disable.appendChild(t);
    document.getElementById('enabledSpace').appendChild(disable);
    //Delete
    var delButton = document.createElement("button");
    var t = document.createTextNode("Delete");
    delButton.className = "del";
    delButton.appendChild(t);
    document.getElementById('enabledSpace').appendChild(delButton);
    }

function listPluginD(dir) {
    //Text
    var dir = arguments[0]
    var type = "disabled"
    var para = document.createElement("p");
    var t = document.createTextNode(dir);
    para.className = type;
    para.appendChild(t);
    document.getElementById('disabledSpace').appendChild(para);
    //Enable
    var enable = document.createElement("button");
    var t = document.createTextNode("Enable");
    enable.className = "enable";
    enable.onclick = test()
    enable.appendChild(t);
    document.getElementById('disabledSpace').appendChild(enable);
    //Delete
    var delButton = document.createElement("button");
    var t = document.createTextNode("Delete");
    delButton.className = "del";
    delButton.appendChild(t);
    document.getElementById('disabledSpace').appendChild(delButton);
    }

function enablePlugin(name) {
    name = arguments[0]
    fs.rename("./src/scripts/disabledplugins/" + name,"./src/scripts/plugins/" + name)
    location.reload();
}
function disablePlugin(name) {
    name = arguments[0]
    fs.rename("./src/scripts/plugins/" + name,"./src/scripts/disabledplugins/" + name)
    location.reload();
}
function test() {
    console.log("test")
}

Answer 1

这是因为您正在执行 test() 函数，而不是传递对其的引用。

您需要这样做:

enable.onclick = test

原因:

JavaScript 解释器将右侧的任何值分配给左侧的变量。在您的例子中，发生的情况是解释器执行了 test 函数并将返回值(未定义)分配给 onclick 事件处理程序。

编辑:如果您想将 dir 传递到您的 test 函数中:您将需要创建一个如下所示的函数包装器:

enable.onclick = function () {
    test(dir);
}

请注意，包装函数未执行(没有 ())。 test 函数将执行 onclick。