JavaScript 鼠标判断点击是否为已选中元素（实现方法---节省资源）

最新推荐文章于 2023-09-01 13:41:34 发布

Smile_Tcode

最新推荐文章于 2023-09-01 13:41:34 发布

阅读量1.9k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Smile_Tcode/article/details/109693748

版权

js css html javascript es6

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

Smile_Tcode

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 鼠标判断点击是否为已选中元素（实现方法---节省资源）

JavaScript 鼠标判断点击是否为已选中元素（节省资源）1.情景：一个下拉框组件，点击打开下拉框，点击组件外任意位置，实现收起下拉框。2.原理：（1）使用标志位isChoose表示是否选中（或是否在元素内）isClickThis表示是否点击当前元素（2）首次选中（进入元素）创建事件监听器。isChoose=true。点击时isClickThis=true （3）取消选中（离开元素）。isChoose=false。点击时isClickThis=false,同时删除事件监听器。
复制链接

扫一扫

专栏目录