时间戳

首页 > 解决方案 > HTML 按钮的“onclick”属性在被点击之前调用函数

javascript - HTML 按钮的“onclick”属性在被点击之前调用函数

问题描述

我试图d3.select用一个属性在 DOM 中创建一个按钮，onclick这样当我单击该按钮时，就会调用一些函数。但是，在我单击按钮之前，该函数只是调用自身。这是我的 JS 代码：

var something = function() {
     console.log("do something");
}


d3.select("#done")
    .append("button")
    .text("Button Text")
    .attr("onclick", something);

这是我的 HTML（还有更多，但这是相关部分）：

<div id="done"></div>

当我执行代码时，something 函数会立即被调用并打印到控制台。我怎样才能解决这个问题？

如果这看起来真的很幼稚，请提前道歉——我对此很陌生。

标签： javascripthtmlfunctiond3.jsdom

解决方案

而不是 using attr("onclick", something)，它将立即调用该函数，而是使用以下方式设置事件侦听器selection.on：

var something = function() {
  console.log("do something");
}

d3.select("body")
  .append("button")
  .text("Button Text")
  .on("click", something);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

为了让您了解为什么something在您的代码中被调用，即使它没有括号（如something()），文档解释selection.attr说：

[...] 如果值是一个函数，它会针对每个选定的元素进行评估。

话虽如此，您正在评估该功能（因此，在控制台中记录一条消息）。另外，请记住您的函数返回undefined，因此您没有添加任何属性。

推荐阅读