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 

WHY：

的JavaScript解釋器分配任何值上左邊的變量的權利。就你而言，發生的事情是解釋器執行了test函數，並將返回值（未定義）返回給onclick事件處理函數。

編輯：如果你想在dir傳遞到您的test功能：您將需要一個函數包裝是這樣的：

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

通知不執行包裝功能（無()小號）。 test函數將被執行onclick。

Answer 2

@ jsve的回答並不完美（給出一個未定義的錯誤），但它確實給了我一個想法，它的工作原理。我把我想要在函數中執行的參數放在腳本中。這是我的最終代碼。

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 = function() { disablePlugin(dir); } 
    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 = function() { enablePlugin(dir); }; 
    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(); 
}