每次我在 <body> 中单击鼠标时，我创建的函数都会运行答案

【问题标题】：Every time I mouse click in the <body> my function I created runs每次我在 <body> 中单击鼠标时，我创建的函数都会运行
【发布时间】：2019-10-03 15:07:53
【问题描述】：

每次点击使用 innerhtml 创建的按钮时，我都想要一个新段落

我已经在 JavaScript 中完成了正确的语法。我希望我的段落只有在我单击我创建的按钮时才会改变。

var button = document.getElementById("createpara"); 

document.getElementById("showpara").innerHTML;

function writepara() {

    document.getElementById("showpara").innerHTML = '<p>This is IT</p>';
}

document.addEventListener("click",writepara, false);

我希望我的段落仅在我点击我创建的按钮时发生变化。

【问题讨论】：

您将点击事件分配给整个文档。试试 button.addEventListener()

标签： javascript button addeventlistener innerhtml

【解决方案1】：

你应该让你的代码像这样

button.addEventListener("click",writepara);

代替

document.addEventListener("click",writepara);

【讨论】：

【解决方案2】：

添加到@MohammedHendy 的评论

当您绑定事件侦听器时，它是分层的。它将冒泡 DOM 并触发所有事件侦听器，直到它到达最顶部的节点。

例如：

如果我有这个：

<div>
   <button>Text</button>
<div>

我在div 上放置了一个事件侦听器，但不是button，当单击按钮时，就好像我单击了div。

如果我希望仅在单击按钮时触发事件，则 ONLY 在 button 上设置事件侦听器

在您的情况下，您已将其应用于代表整个页面的document。这就像说"If you click ANYWHERE on this page, I want this function to run"

【讨论】：