如何将 onClick() 事件添加到 图标格式？答案

【问题标题】：How can i add onClick() events to an icon format?如何将 onClick() 事件添加到 图标格式？
【发布时间】：2021-07-24 10:14:29
【问题描述】：

我尝试了很多东西，但它们似乎不起作用。这是我要触发的代码：

...
<body>
  ...
   <div class="navbar">
       ...
        <div class="searchIcon">
            <i class="fi-br-search"></i> //I want this (icon/line) to trigger testSearch()
        </div>
       ...
   </div>
  ...
<body>

这是我写的 js：

function testSearch() {
    alert("Hello")
}

【问题讨论】：

标签： html triggers onclick icons

【解决方案1】：

只需使用onclick 属性：

function testSearch() {
    alert("Hello")
}

<body>
   <div class="navbar">
        <div class="searchIcon">
            <i onclick="testSearch()" class="fi-br-search">asdasd</i> 
        </div>
   </div>
<body>

最好将图标嵌套在按钮中，并将点击处理程序交给按钮。

【讨论】：

【解决方案2】：

第一种解决方案是简单地使用onclick，但不建议使用onclick，而是使用eventListeners

function testSearch() {
    alert("Hello")
}
document.getElementById("i").addEventListener("click", testSearch)

   <div class="navbar">
        <div class="searchIcon">
            <i id="i" class="fi-br-search">click me</i> 
        </div>
   </div>

【讨论】：

这看起来不像是发出警报，我有垃圾邮件点击了这么多，但它什么也没做.....
@Endor 它非常适合我，尝试再次运行代码 sn-p 并单击文本