实现一个可复用的点击区域之外方法

随着3大框架的风靡,我们从以前的layer等UI库迁移到了更加强大的UI库,比如vue的好伙伴element,组件库的作用是封装一些常用的功能,将HTML、CSS、JS作为一个功能单元封装为一个整体,向外界暴露合理的接口,它极大地提升了我们的开发效率,最近遇到一个要自己写一个select(选择器)场景,以下的场景一下子让我懵了

比如上图的选择器,我们除了点击输入框时,会切换列表展开状态,点击列表项会收起列表,同时,我们需要在点击其他区域时,也要关闭列表,本文基于此需求展开

DOM判断

这个需求最重要的点就是需要判断点击区域在指定区域之外,执行指定的逻辑,沿着这个思路,我竟然想去了去计算当前点击的坐标是否在指定区域,这显然是不行的,从视觉上难以判断,有没有能够从编码上判断的方法呢,比如,判断点击的DOM不是指定的DOM,于是有了第一版的方案

// 给元素绑定click事件
element.addEventListener("click",(e) => {
const { target } = e // 判断target是不是在指定DOM
}, false);

这里有两个严重的问题

  • 按照上述代码,需要为页面上的每个DOM元素都绑定一个事件,无论在代码量和性能上,都十分不好

  • 指定DOM只能是满足条件的,要是比较多,会导致这部分逻辑很复杂

事件委托

原先的代码,会导致绑定和事件在每个DOM节点上重复,其实,程序只需要知道本次点击的是谁,不需要关注绑定事件的是谁,这个时候,我们的事件委托就上场了。

// 给元素绑定click事件
document.addEventListener("click",(e) => {
const { target } = e // 判断target是不是在指定DOM
}, false);

我们将事件绑定在document上,默认情况下,事件是遵循冒泡模型,从事件源往document上触发对应类型的事件,所以事件点击时候,能够在doucument上统一接受到事件源,另外,这里测试了一下,因为在某些场景下,可能会使用到捕获模型

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="button"></button>
</body>
<script>
// 注册捕获阶段触发的事件
document.getElementById("button").addEventListener("click", () => { }, true)
// 代理document内元素的click
document.addEventListener("click", (e)=> {
const { target } = e
console.log(target);
})
</script>
</html>

可以看到,即使使用了捕获模型,我们的事件源也是一样可以正确获取,当然,这只是一个尝试,一般来说,这个不用尝试都知道是这样的,利用事件委托,我们很好地减少了事件绑定重复,有一个微不足道的缺点,就是阻止了事件传播,如阻止事件冒泡的元素不能正确触发我们的document事件,但是这个可以接受

contains

我们一开始是判断DOM节点特有的标志来执行我们的程序

// 判断指定节点
if($(target).attr("id") === xxx)

这样子太受限了,需要写很多条件,况且我们需要的是区域,所以最好能够有个API能判断是否在一个区域,正好,有一个API

node.contains( otherNode ) 

node 是否包含otherNode节点.
otherNode 是否是node的后代节点.

contains这个API,可以判断一个节点是否包含在另外一个节点之内,这个内部是指是否为判断节点本身或者其后台节点,于是,我们利用此API,就可以完美判断一个节点是否在一个区域之外

// 触发事件节点在区域外
!node.contains(target)

最终的代码是

document.addEventListener("click",(e) => {
const { target } = e if(!node.contains(target)) {
// 点击区域之外的事情
}
}, false);

复用拓展

上述的最终代码已经可以用了,但是对于多个元素来说,他们需要不同的callback,这里我们我们进行一个改造

let nodeList = []

document.addEventListener("click",(e) => {
const { target } = e
nodeList.map(({node, cb}) => {
if(!node.contains(target)) {
cb()
// 点击区域之外的事情
}
}) }, false); // 将你需要实现点击区域之外的逻辑置入nodeList之中
nodeList.push({
node: node,
cb: function () { }
})

由于节点和callback是每个需要此交互的都不同,这里讲节点和callback存储到一个全局的列表中去,然后点击页面时,去触发列表中点击元素不在其指定范围的callback,使得逻辑得以复用,而每个元素自己的业务逻辑可以分离,不过这里有个小问题就是要注意在指定节点移除时,要及时手动移除nodeList中对应的逻辑

v-clickout指令实现

const on = (function() {
if (document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
} else {
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler);
}
};
}
})(); const nodeList = [];
const ctx = '@@clickoutsideContext'; let startClick;
let seed = 0; on(document, 'mousedown', e => (startClick = e)); on(document, 'mouseup', e => {
nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
}); function createDocumentHandler(el, binding, vnode) {
return function(mouseup = {}, mousedown = {}) {
if (!vnode ||
!vnode.context ||
!mouseup.target ||
!mousedown.target ||
el.contains(mouseup.target) ||
el.contains(mousedown.target) ||
el === mouseup.target ||
(vnode.context.popperElm &&
(vnode.context.popperElm.contains(mouseup.target) ||
vnode.context.popperElm.contains(mousedown.target)))) return; if (binding.expression &&
el[ctx].methodName &&
vnode.context[el[ctx].methodName]) {
vnode.context[el[ctx].methodName]();
} else {
el[ctx].bindingFn && el[ctx].bindingFn();
}
};
} /**
* v-clickoutside
* @desc 点击元素外面才会触发的事件
* @example
* ```vue
* <div v-element-clickoutside="handleClose">
* ```
*/
export default {
bind(el, binding, vnode) {
nodeList.push(el);
const id = seed++;
el[ctx] = {
id,
documentHandler: createDocumentHandler(el, binding, vnode),
methodName: binding.expression,
bindingFn: binding.value
};
}, update(el, binding, vnode) {
el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
el[ctx].methodName = binding.expression;
el[ctx].bindingFn = binding.value;
}, unbind(el) {
let len = nodeList.length; for (let i = 0; i < len; i++) {
if (nodeList[i][ctx].id === el[ctx].id) {
nodeList.splice(i, 1);
break;
}
}
delete el[ctx];
}
};

探索clickout指令实现的更多相关文章

  1. 走进AngularJs(三)自定义指令-----(上)

    一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...

  2. JavaScript修改Canvas图片

    用JavaScript修改Canvas图片的分辨率(DPI)   应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(D ...

  3. 【转】: 探索Lua5.2内部实现:虚拟机指令(3) Upvalues & Globals

    在编译期,如果要访问变量a时,会依照以下的顺序决定变量a的类型: a是当前函数的local变量 a是外层函数的local变量,那么a是当前函数的upvalue a是全局变量 local变量本身就存在于 ...

  4. 【转】: 探索Lua5.2内部实现:虚拟机指令(2) MOVE & LOAD

    name args desc OP_MOVE A B R(A) := R(B) OP_MOVE用来将寄存器B中的值拷贝到寄存器A中.由于Lua是register based vm,大部分的指令都是直接 ...

  5. 【转】: 探索Lua5.2内部实现:虚拟机指令(1) 概述

    Lua一直把虚拟机执行代码的效率作为一个非常重要的设计目标.而采用什么样的指令系统的对于虚拟机的执行效率来说至关重要. Stack based vs Register based VM 根据指令获取操 ...

  6. 【探索】机器指令翻译成 JavaScript

    前言 前些时候研究脚本混淆时,打算先学一些「程序流程」相关的概念.为了不因太枯燥而放弃,决定想一个有趣的案例,可以边探索边学. 于是想了一个话题:尝试将机器指令 1:1 翻译 成 JavaScript ...

  7. 【系统篇】从int 3探索Windows应用程序调试原理

    探索调试器下断点的原理 在Windows上做开发的程序猿们都知道,x86架构处理器有一条特殊的指令——int 3,也就是机器码0xCC,用于调试所用,当程序执行到int 3的时候会中断到调试器,如果程 ...

  8. NoSQL初探之人人都爱Redis:(4)Redis主从复制架构初步探索

    一.主从复制架构简介 通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一 ...

  9. 探索c#之递归APS和CPS

    接上篇探索c#之尾递归编译器优化 累加器传递模式(APS) CPS函数 CPS变换 CPS尾递归 总结 累加器传递模式(Accumulator passing style) 尾递归优化在于使堆栈可以不 ...

随机推荐

  1. shell通配符, 变量, shell作用域

    1. 指定格式输出当前时间: echo `date +%Y%m%d`  # 注意使用反引号, +号后面不要有空格 反引号中的东西会被当做命令来执行, 并输出执行的结果 2. $uid用于判断当前是否是 ...

  2. navicat连接mysql报错1251解决方案,从头搭建node + mysql 8.0 (本人亲测有效)

    准备学node 好久了 一直没有动手去写,今天突发奇想,然后就安装了一个mysql (找了一个博客跟着步骤去安装的),然后打算用node 写个增删改查. 1.下载mysql安装包   地址: http ...

  3. Linux 学习记录二(文件的打包压缩).

    和 window不同,在Linux压缩文件需要注意的是,压缩后的文件会把源文件给替代,无论是gzip.bzip2.xz 均不支持压缩目录,要达到压缩目录的目的,需要用到tar指令.   gzip 压缩 ...

  4. C语言程序设计100例之(7):级数求和

    例7    级数求和 题目描述 已知: Sn =1+1/2+1/3+…+1/n.显然对于任意一个整数 k,当 n 足够大的时候,Sn>k. 现给出一个整数 k,要求计算出一个最小的 n,使得 S ...

  5. LeetCode 136:只出现一次的数字 Single Number

    题目: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. Given a non-empty array of integers, every e ...

  6. ExtJS布局控件

    Layout Controls Auto Layout Ext JS4中的容器的默认布局是自动布局.这个布局管理器会自动地将组件放在一个容器中. Fit Layout Fit布局安排了容器的内容完全占 ...

  7. MYSQL 高级语法

    1.高级建表和插入 使用creat 和select 进行建表操作,中间采用AS 标识符: CREATE TABLE new_table AS SELECT * FROM exist_table LIM ...

  8. Oracle - 如何查找指定字符串所出现的表

    需求:举个例子,oracle测试库的scott用户下面的有张emp表,emp表的ename列中有一行数据为'CLARK'.红色标记部分. SQL> select * from scott.emp ...

  9. OpenGL入门1.6:坐标系统,3D箱子

    每一个小步骤的源码都放在了Github 的内容为插入注释,可以先跳过 前言 我们已经学习了如何利用矩阵变换来对所有顶点进行变换 OpenGL希望在每次顶点着色器运行后,我们可见的所有顶点都为标准化设备 ...

  10. 高强度学习训练第九天总结:5道剑指offer的题目

    实在不想看JVM了.刷几道剑指Offer的题,今天就水一水吧,脑子迷糊. 1.二维数组中的查找 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增 ...