Question

在hmtl文件中，我有一个简单的按钮

<body>
    <button type="button" onclick="create_button()">Create button</button>
</body>

并在js文件中我有两个函数

function create_button() {
    var new_button = document.createElement("Button");
    new_button.innerHTML = "Pop the alert";
    new_button.type = "button";
    new_button.onClick = my_function();
    document.body.appendChild(new_button);
};
function my_function() {
    alert("Not so fast");
};

显然它应该以下列方式工作：

点击创建按钮 - ＆gt; 弹出警告按钮
点击弹出提醒 - ＆gt; “不是那么快”警报上诉

但是，点击创建按钮后，系统会显示警告。我想弹出提醒按钮会激活它，但我不知道如何阻止它这样做。

编辑。我实际上遇到了my_function取决于某些参数的问题。所以我们假设我们有以下情况：

function my_function(x) {
    alert("I like " + x);
};

我想创建my_function("Stack Overflow")的按钮。

根据我使用的SO讨论

new_button.addEventListener('click', function(){my_function("Stack Overflow");});

它有效。

Answer 1

您可以使用new_button.addEventListener('click',my_function);。
因此my_function会被引用，但不会被称为imidiatley：

function create_button() {
  var new_button = document.createElement("Button");
  new_button.innerHTML = "Pop the alert";
  new_button.type = "button";
  new_button.addEventListener('click', my_function);
  document.body.appendChild(new_button);
};

function my_function() {
  alert("Not so fast");
};

<button type="button" onclick="create_button()">Create button</button>

编辑后

如果您的my_function有arguments，则必须将其打包到anonymous function，这样就可以了：

new_button.addEventListener('click',function(){
 my_function(5);
});

或

new_button.onclick=function(){ my_function(5);};

Answer 2

延伸到@itsgoingdown回答：

function create_button() {
  var new_button = document.createElement("Button");
  new_button.innerHTML = "Pop the alert";
  new_button.type = "button";
  new_button.addEventListener('click', function () {
    var x = ' sport'
    my_function(x) 
  });
  document.body.appendChild(new_button);
};

function my_function(x) {
  alert("Not so fast" + x);
};

新创建的按钮（通过createElement（“Button”））激活自己。如何阻止它？

2 个答案: