【功能实现】想要点击某个部分高亮 但是点击页面其他部分不高亮的方法 或则 只有点击下拉列表的时候显示列表 ，点击其他部分的时候将菜单列表隐藏的功能

问题

• 想要实现只有点击某个区域让菜单列表显示，点击页面其他部分让菜单关闭的功能

• 或则是想要实现将鼠标焦点到输入框及点击如下图部分的上下按钮的时候高亮查询框边框颜色，但是在点击页面的其他部分的时候不再高亮

实现方式

以下实现都是在Vue3、pinia下，接下来以查询框高亮为案例来实现

• 查询框html代码 其中siteStore.rightSearchActive就是用来控制查询框高亮状态, 并在input及上一页、下一页按钮上都添加了rightSearchActiveclass名称。

• 给app.vue页面中根标签上绑定@click="handleClick"点击事件，该事件代码如下：

// 需要点击时高亮的class名
const activeClassNames = ['rightSearchActive']
const handleClick = (event)=>{
    // let element = event.target
    // 获取当前点击元素的classList
    let classList = [...event.target.classList]
    if(classList.length > 0){
        // 判断当前点击元素是否是 点击时候让查询边框高亮的元素
        let key:any = intersection(classList,activeClassNames)
        if(key){
            // 清除页面中activeClassNames中class对应元素的高亮状态，也就是先将查询框的高亮状态清除
            makeClassNotActive()
            siteStore[key] = true
        }
    }else{
        makeClassNotActive()
    }
}

点击当前元素的时候，如果当前元素的类名中包含了rightSearchActive的时候就执行siteStore.rightSearchActive = true将查询框设置了高亮，否则就设置了未高亮

// 获取两个数组的交集
const intersection = (nums1, nums2) => {
    return [...new Set(nums1)].filter((item) => {
        return nums2.includes(item);
    });
};

总结

• 实质上就是借助class：判断当前点击元素是否包含对应的class名称，如果没有该class名称说明点击的是其他部分，如果有该class名称，那么点击的就是要高亮或是要显示的元素