当前位置: 首页 > news >正文

事件的截获

1.事件截获原理


利用事件的捕获阶段,添加事件。

再利用触发事件元素(e.target)来判断(根据一定的标识或者某些特征)是否是我们需要劫持的dom。

 

2.具体拦截


这里使用id作为一个判断根据,真实场景中肯定不是这样的。

这里的特征是需要根据一定的规则去寻找的。(这里只是为了演示原理)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>118boys</title>
</head>
<body>

<div style="width: 200px;height: 200px;border:1px solid" id="warp">
    <div style="width: 100px;height: 100px;border:1px solid" id="ok">可疑目标</div>    
</div>


</body>
<script type="text/javascript">
    
    var warp = document.getElementById('warp'),
        dom = document.getElementById('ok');
    

    dom.addEventListener('click', function(){
        console.log("可疑目标")
    },false)
    
    warp.addEventListener('click', function(e){

        var e = event || window.event,
            target = e.target || e.srcElement;
        if(target.getAttribute('id') === 'ok'){
            console.log('劫持id=ok的dom,成功!')
            console.log('触发事件元素(e.target)与事件绑定元素(e.currentTarget) :' + e.target == e.currentTarget)

            //处理拦截到的可疑目标
            
        }
    },true)


</script>
</html>

当我们点击可以目标的时候:

 

3.拦截成功后销毁可疑目标(具体的操作需要对症下药)


这才是我们真正的目的,就是不让要拦截的目标执行!

处理拦截到的可疑目标,提供集中思路:

1.移除目标
target.parentNode.removeChild(target);

2.隐藏可以目标(防止有些注入的js轮询dom节点进行检测)
target.style.display = "none";

3.阻止冒泡事件

e.stopPropagation()也可组织事件的执行。

4.一般注入都是内敛形式绑定的事件(<a οnclick=""></a>),这时候只需要判断进行相应的操作即可。

 

相关文章:

  • Hibernate中如何完成持久化类和数据库映射文件
  • 如何做好一名实习生
  • 事件分发时候的onTouchEvent,onInterceptTouchEvent,dispatchTouchEvent调用顺序
  • PetaPoco - 轻量级高性能的ORM框架(支持.NET Core)
  • jQuery基础:mouseeter( ) 与 mouseover( ) 区别
  • 为什么「教学相长」?
  • linux内核(kernel)版本号的意义
  • a+=b 是什么意思?
  • 模拟。。。 Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) C
  • 端口聚合配置
  • iOS 2D绘图详解(Quartz 2D)之概述
  • java JVM : Xms Xmx PermSize MaxPermSize 区别
  • [svc]后台运行程序screen or nohup
  • 配置 L3 agent - 每天5分钟玩转 OpenStack(99)
  • LayDate使用
  • [ JavaScript ] 数据结构与算法 —— 链表
  • [笔记] php常见简单功能及函数
  • 11111111
  • Android单元测试 - 几个重要问题
  • interface和setter,getter
  • java小心机(3)| 浅析finalize()
  • JS基础之数据类型、对象、原型、原型链、继承
  • linux安装openssl、swoole等扩展的具体步骤
  • PHP 使用 Swoole - TaskWorker 实现异步操作 Mysql
  • Python打包系统简单入门
  • TCP拥塞控制
  • Yeoman_Bower_Grunt
  • 不上全站https的网站你们就等着被恶心死吧
  • 大整数乘法-表格法
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 开发了一款写作软件(OSX,Windows),附带Electron开发指南
  • 想晋级高级工程师只知道表面是不够的!Git内部原理介绍
  • 小程序开发之路(一)
  • nb
  • ​MPV,汽车产品里一个特殊品类的进化过程
  • #vue3 实现前端下载excel文件模板功能
  • #我与Java虚拟机的故事#连载08:书读百遍其义自见
  • #我与Java虚拟机的故事#连载19:等我技术变强了,我会去看你的 ​
  • (+3)1.3敏捷宣言与敏捷过程的特点
  • (C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切
  • (C++)栈的链式存储结构(出栈、入栈、判空、遍历、销毁)(数据结构与算法)
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (大众金融)SQL server面试题(1)-总销售量最少的3个型号的车及其总销售量
  • (附源码)spring boot基于Java的电影院售票与管理系统毕业设计 011449
  • (附源码)springboot优课在线教学系统 毕业设计 081251
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • (三)Honghu Cloud云架构一定时调度平台
  • (十五)使用Nexus创建Maven私服
  • (转)VC++中ondraw在什么时候调用的
  • (转)从零实现3D图像引擎:(8)参数化直线与3D平面函数库
  • (转)一些感悟
  • (转)原始图像数据和PDF中的图像数据
  • (状压dp)uva 10817 Headmaster's Headache
  • .desktop 桌面快捷_Linux桌面环境那么多,这几款优秀的任你选
  • .NET 回调、接口回调、 委托