Question

我试图使用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函数并将其打印到控制台。我该如何解决？

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

Answer 1

不是使用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的{{3}}解释道： / p>

[...]如果该值是一个函数，则会为每个选定的元素求值。

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

HTML按钮的“ onclick”属性在被点击之前会调用功能

1 个答案: