JavaScript 鼠标判断点击是否为已选中元素(节省资源)
1.情景:
一个下拉框组件,点击打开下拉框,点击组件外任意位置,实现收起下拉框。
2.原理:
(1)使用标志位isChoose表示是否选中(或是否在元素内)
isClickThis表示是否点击当前元素
(2)首次选中(进入元素)创建事件监听器。isChoose=true。点击时isClickThis=true
(3)取消选中(离开元素)。isChoose=false。点击时isClickThis=false,同时删除事件监听器。
3.代码:
(1)初始化变量
let isChoose = false
let isClickThis = false
(2)点击事件执行方法
const clickHandle = () => {
(!isChoose) && (()=>{ // 销毁事件监听器
isClickThis = false
window.removeEventListener('click', clickHandle)
})()
}
(3)选中元素 / 进入元素
isChoose = true
!isClickThis && (()=>{ // 创建事件监听器
isClickThis = true
window.addEventListener('click', clickHandle)
})()
(4)取消选中元素 / 离开元素
isChoose = false
4.测试代码
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.block{
border: 1px solid #d6cbce;
background: whitesmoke;
width: 200px;
height: 200px;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body >
<div class="block" onmouseenter="isChoose=true" onmouseleave="isChoose=false" onclick="createListener()"></div><br />
<div>点击时鼠标位置: <span id="clickPos">框内</span></div>
<div>(是否点击元素: <span id="listener">true</span>)</div>
<script>
let isChoose = false
let isClickThis = false
const CLICK_POS = document.getElementById('clickPos')
const LISTENER = document.getElementById('listener')
const clickHandle = () => {
CLICK_POS.innerHTML = isChoose ? '框内' : '框外';
(!isChoose) && (()=>{
isClickThis = false
LISTENER.innerHTML = isClickThis
window.removeEventListener('click', clickHandle)
})()
}
const createListener = () => {
!isClickThis && (() => {
isClickThis = true
LISTENER.innerHTML = isClickThis
window.addEventListener('click', clickHandle)
})()
}
</script>
</body>
</html>