html标签内是否可以有点击事件？答案

【问题标题】：Is it Possible to have a on click event inside a html tag?html标签内是否可以有点击事件？
【发布时间】：2021-05-12 15:33:48
【问题描述】：

这是小代码 sn-p，其中 HTML 标记被传递给具有类名 message-container 的某个 div，它工作正常。

chatHTML += '<div class="message-block">'+
'<div class="user-icon"></div>'+
'<div class="message">'+ doc.data().message +'</div>'+
'<i class="fas fa-reply onclick=expand(doc.data().message)"></i>'+
'</div>';

$(".message-container").html(chatHTML);

我可以添加一个相同的 onclick 事件，以便我可以将变量传递给它吗？

我通过写 onclick 事件并在同一页面中调用函数来尝试使用上述方法

 function expand(message)
{
console.log(message)
}

但它给出了expand function is not defined的错误

还有其他方法可以在 HTML 标签中调用 onClick 事件吗？

【问题讨论】：

是的，但是您需要明智地使用" ...我建议使用 ` 将整个字符串括起来，然后您可以根据需要同时使用 ' 和 "

标签： javascript html

【解决方案1】：

我建议你试试createElement 方法。

你可以简单

var myDiv = document.createElement("div");
myDiv.addEventListener('click', function () { alert('hi'); });
document.body.appendChild(myDiv);

这是您将对您的 javascript 引用进行更精细调整的控制。

【讨论】：

【解决方案2】：

与您的代码不太一样，但有一个简单的可重现示例：

const someMessage = 'hello world';

document.body.innerHTML += '<div class="message-block">'+
'<div class="user-icon"></div>'+
'<div class="message">'+ someMessage +'</div>'+
'<i class="icon" onclick="expand(someMessage)"></i>'+
'</div>';

 function expand(message)
{
  console.log(message)
}

.icon {
  display: block;
  width: 1em;
  height: 1em;
  background: red;
}

似乎按预期工作。

【讨论】：

【解决方案3】：

<i class="fas fa-reply onclick=expand(doc.data().message)"></i>

你不小心把 onclick="()" 放在你的类里面。让我们解决这个问题，并添加“”：

<i class="fas fa-reply" onclick="expand(doc.data().message)"></i>

【讨论】：

【解决方案4】：

expand 函数未定义或不存在，可能是因为它与调用它的函数不在同一范围内，该函数是动态创建的。

不要使用 onclick 属性，而是使用 .on 函数或 .click 函数。

(function($) {
  $(document).ready(function() {
    let chatHTML = '';

    function expand(message) {
      console.log(message);
    }

    chatHTML += '<a class="message-block">' +
      '<div class="user-icon"></div>' +
      '<div class="message">Message</div>' +
      '<i class="fas fa-reply"></i>' +
      '</a>';

    $(".message-container").html(chatHTML);
    
    $(".message-block").on("click", function() {
      expand("message");
    });
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message-container"></div>

【讨论】：

【解决方案5】：

一般是not a good idea使用内联事件处理器。

使用event delegation 可能更适用/更合适。它允许您为尚未创建的元素分配处理程序。

此外，尝试使用更现代的方法来附加 html，例如 insertAdjacentHTML。这是一个示例，基于您问题的代码

document.addEventListener("click", handle);

// add 2 blocks
document.querySelector("#chatHtml")
  .insertAdjacentHTML("beforeend", `
    <div class="message-block">Block 1
      <div class="user-icon"></div>
      <div class="message"></div>
      <b class="fas fa-reply">ⓘ</b>
    </div>
  `);
  
document.querySelector("#chatHtml")
  .insertAdjacentHTML("beforeend", `
    <div class="message-block">Block 2
      <div class="user-icon"></div>
      <div class="message"></div>
      <b class="fas fa-reply">ⓘ</b>
    </div>
  `);

function handle(evt) {
  const origin = evt.target;
  
  if (origin.classList.contains("fa-reply")) {
  //                    ∟ only if clicked on b.fa-reply
  const messageBlock = origin.closest(".message-block");
  //                          ∟ retrieve the parent div.message-block
  messageBlock.querySelector(".message").textContent = 
  //                         ∟ fill div.message with some text
        `It's ${new Date().toLocaleTimeString()} and you clicked!`;
  }
}

body {
  margin: 2rem;
  font: normal 12px/15px verdana, arial;
}
.fa-reply {
  cursor: pointer;
  min-width: 24px;
  display: inline-block;
  margin: 0.5rem 0;
  font-size: 1.3rem;
}

&lt;div id="chatHtml"&gt;&lt;/div&gt;

【讨论】：