常用的 list item 点击效果

常见的 list template 如何选择 template 以及事件代理

适用场景

• nav 上绑定时间，li 上响应
• 大数据的列表整件代理方式绑定
• autocomplete

HTML 部分

实际项目中很多都是 li 里的模板部分是自定义的

<ul>
    <li>
        <i>Icon::</i>
        <span>1 span</span>
    </li>
    <li>
        <i>Icon::</i>
        <span>2 span</span>
    </li>
    <li>
        <i>Icon::</i>
        <span>3 span</span>
    </li>
    <li>
        <i>Icon::</i>
        <span>4 span</span>
    </li>
    <li>
        <i>Icon::</i>
        <span>5 span</span>
    </li>
</ul>

 CSS部分

注意防止 icon/span 的误点击部分处理 pointer-events: none;

<style>
    ul li:hover{
        background-color: #eee;
    }
    ul li span, 
    ul li i{
        pointer-events: none;
    }
</style>

Javascript 部分

这里有对  li 进行 select 方式的匹配 e.target.matches("li")

const list = document.querySelector("ul");
list.addEventListener("click", (e) => {
  console.log("list item clicked:", e.target.matches("li"));
});