是否可以在单击 html 未显示列表中的项目标记时触发事件

Can an event be triggered on a click on a item marker on an html unoredered list?

本文关键字：目标 项目 事件 列表 单击 html 显示 是否      更新时间：2023-09-26

当用户单击无序列表中项目的图标时，有没有办法触发操作？（在JavaScript和/或jquery中）

是的，如果您愿意，可以只定位列表项标记，但这需要将每个项目的内容包装在另一个标记中。

这是因为将事件处理程序分配给 <li> 元素时，该元素或任何子元素将触发该处理程序。然后在处理程序中，您可以检查nodeName它会告诉您<li>是否已单击或是否是子元素。由于所有内容都由<span>或<div>包装，因此只有列表项标记会触发目标为<li>的事件。

以下可运行示例仅在单击列表项标记时触发警报，否则将忽略单击事件。

$("li").on('click', function(e) {
    if (e.target.nodeName === "LI") {
        alert('You clicked the list item marker');
    } else {
        e.preventDefault(); //a child element was clicked
    }   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li><span>One</span></li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
</ul>

好吧，很难猜测你想要没有你的代码和标记，但你可以尝试这样的事情。

.HTML

<ul>
  <li>
    <a href="" class="icon"></a>
    <a href="" class="icon"></a>
    <a href="" class="icon"></a>
  </li>
</ul>

.JS

$(function() {
  $('a.icon').on('click', function(){
    //your code here...
  });
});
  • 我不知道你的"图标"是什么 html 标签，但这个方案适用于你尝试的任何东西，只需替换你的元素的<a>并向其添加类icon

是的...使用 JQUERY。

<ul>
    <li>
      <a href="" class="item">Item1</a>
      <a href="" class="item">Item2</a>
    </li>
<ul>

然后在你的JavaScript中使用：

$(".item").click(function() {
   var itemIcon = $(this);
   // itemIcon contains the icon that was clicked. Do something with it... 
});
相关文章：