JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
2024-06-30 04:24:07
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 一、阻止事件冒泡和默认行为
- 二、拖拽
- 1, 实现拖拽相关的三大事件:
- 2, 实现拖拽思路：
- 1, 给目标元素添加onmousedown事件(鼠标按下事件)
- 2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:
- 3, 在onmousedown事件(鼠标按下事件)发生以后，给document再添加onmouseup事件(鼠标松开事件)，且在onmouseup事件中，取消document的onmousemove事件;
- **获取style样式**
- 三、事件监听器
- 事件监听器：
- 1, 添加事件监听器
- 2, 移除事件监听器
- 事件监听器：
- 笔记代码
- 1.阻止默认事件
- 2.阻止冒泡事件
- 3.实现拖拽
- 4.练习
- 1.练习1
- 2.练习2
- 总结
一、阻止事件冒泡和默认行为
事件流
事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候， 那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。
事件冒泡
事件冒泡是从里往外逐个触发. 事件捕获, 是从外往里逐个触发. 现代的浏览器默认情况下都是事件冒泡的模式.
冒泡传递事件
document.onclick=function(){ console.log('我是 document');
};
document.documentElement.onclick=function() { console.log('我是 html');
};
document.body.onclick= function(){ console.log('我是 body');
};
document.getElementById('box').onclick=function() { console.log('我是 div');
};
document.getElementsByTagName('input')[0].onclick= function(){console.log('我是 input');
};
但是一般我们只在指定的节点上添加事件, 而不想让其传递到下层节点触发事件, 这样我们就需要阻止事件冒泡;
阻止事件冒泡有两个方法:
( 在指定不想再继续传递事件的节点的事件执行函数中使用)
1, 取消冒泡, IE
e.cancelBubble = true;
2, 停止传播, 非IE
e.stopPropagation();
例如:
document.getElementsByTagName('input')[0].onclick= function(evt){var e = evt || window.event;//可以通过下述两个方法取消事件冒泡if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true };
阻止浏览器默认行为
if (e.preventDefault) {e.preventDefault(); //非IE}else {e.returnValue = false; // IE}
阻止右键菜单
在之前使用event对象的button属性时, 点击鼠标右键会弹出系统菜单, 如果我们想要创建自己的右键菜单, 则需要先阻止默认的右键菜单
document.oncontextmenu = function(){console.log("右键被按下");return false;
}
标签有属性href, 在用户点击超链接标签时, 实际上内部会调用onclick事件，那么如果我们需要在超链接跳转前做一些判断处理, 则可以将onclick指向我们自己的函数,并返回true或者false来决定是否允许超链接跳转;
例如:
var oA = document.getElementsByTagName("a")[0];
oA.onclick = function() {if(confirm("你确定要跳转吗?")) {return true;}else {return false;}
}
<a href=“http://www.baidu.com”>百度一下</a>
二、拖拽
所谓拖拽: 就是按住元素后移动位置, 最后松开的过程
1, 实现拖拽相关的三大事件:
onmousedown : //鼠标按下
onmousemove : //鼠标移动
onmouseup : //鼠标松开
2, 实现拖拽思路：
1, 给目标元素添加onmousedown事件(鼠标按下事件)
在鼠标按下的瞬间, 记录鼠标所在位置与目标元素左边界的距离disX, 以及与上边界的距离disY
2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:
公式: 目标元素的left = oEvent.clientX – disX + “px”;
目标元素的top = oEvent.clientY – disY + “px”;
3, 在onmousedown事件(鼠标按下事件)发生以后，给document再添加onmouseup事件(鼠标松开事件)，且在onmouseup事件中，取消document的onmousemove事件;
注意:
onmousedown触发事件的对象: 目标元素(即要拖拽的元素);
onmousemove触发事件的对象: document
onmouseup触发事件的对象: document
onmousemove和onmouseup的触发事件对象都是document, 意味着鼠标在网页的任意位置移动鼠标或松开鼠标，都会触发对应的事件;
onmousemove和onmouseup 都要写在onmousedown事件中, 这样就可以保证鼠标按下后才可以移动目标元素(onmousemove)或停止移动(onmouseup)
onload = function() {var box = document.getElementById("box");//鼠标按下box.onmousedown = function(evt) {var e = evt || event;//计算鼠标位置与div左边和上边的距离var disX = e.clientX - box.offsetLeft;var disY = e.clientY - box.offsetTop;//鼠标移动document.onmousemove = function(evt) {var e = evt || event;box.style.left = e.clientX - disX + "px";box.style.top = e.clientY - disY + "px";}//鼠标松开document.onmouseup = function() {document.onmousemove = null;document.onmouseup = null;}}
}
获取style样式
if (window.getComputedStyle) {style = window.getComputedStyle(box, null); //支持IE9+及非IE浏览器
} else { style = box.currentStyle; // IE8及以前
}
三、事件监听器
事件监听器：
事件监听器, 是JS事件中的一种事件触发机制, 我们可以通过添加事件监听器的方式给元素添加事件及执行函数
1, 添加事件监听器
box.addEventListener(“click”, func, false) : 给box元素添加点击事件(click), 以及事件执行函数func. 针对该函数的三个参数作说明:
第一个参数(“click”) : 事件名称(前面没有on)
第二个参数(func): 事件执行函数名称(没有双引号, 也没有())
第三个参数(false/true) : 是否使用捕捉(反向冒泡)，默认false，为冒泡
2, 移除事件监听器
box.removeEventListener(“click”, func) : 将box元素的点击事件(click), 以及对应的事件执行函数func移除
注: 这里只会删除使用box.addEventListener()方法添加的事件监听器
注: IE8及其以下不支持，火狐和谷歌支持。
事件监听器：
- 在IE8及以下的浏览器中， 我们可以使用以下方式：
box.attachEvent("onclick", fn); //添加事件
box.detachEvent("onclick", fn); //移除事件
- 封装事件监听器， 兼容IE浏览器， 谷歌， 火狐
//添加事件
function addEvent(obj, type, fn, useCapture){if (obj.addEventListener) { obj.addEventListener(type, fn, useCapture);}else {obj.attachEvent("on"+type, fn);}
}
//移除事件
function removeEvent(obj, type, fn, useCapture){if (obj.removeEventListener) {obj.removeEventListener(type, fn, useCapture);}else {obj.detachEvent("on"+type, fn);}
}
//调用
addEvent(aBtn[0], "click", fn, false);
function fn(){alert("click 按钮1");
}
aBtn[1].onclick = function(){removeEvent(aBtn[0], "click", fn, false);
}
笔记代码
1.阻止默认事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="http://www.baidu.com">a标签</a><!-- a标签默认会跳转页面 --><script>document.getElementsByTagName('a')[0].onclick = function(e){console.log("点击了");// return false 阻止默认行为 遵从w3c但是ie9浏览器之前不支持(常用的)return false//ie浏览器 兼容 其他浏览器也可以使用e.preventDefault()//阻止默认事件\//针对低版本浏览器e.returnValue = false}</script>
</body>
</html>
2.阻止冒泡事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#bigBox{width: 500px;height: 500px;background-color: aqua;}#box{width: 200px;height: 200px;background-color: chartreuse;}</style>
</head>
<body><div id="bigBox"><div id="box"><button id="btn">点击</button></div></div><script>var box = document.getElementById("box")var btn = document.getElementById("btn")var bigBox = document.getElementById("bigBox")box.onclick = function(){console.log("按钮盒子被点击了");}//在点击div里面的按钮时 会触发div的点击事件 事件冒上去了//在触发事件的时候 会一层一层向上冒泡 (他同时会触发父类的事件)//阻止事件冒泡 意思就是阻止事件的向上传递btn.onclick = function(e){//得到事件源对象e = e || window.event//阻止事件向上冒泡 stopPropagation 这个方法可以阻止事件冒泡 且遵从w3c规则 (兼容各大浏览器 ie9之前不兼容)e.stopPropagation()//ie浏览器的阻止事件冒泡 利用一个属性 cancelBubble 设置为true 他也兼容各大浏览器(不遵从w3c规范)// e.cancelBubble = true //取消冒泡 不建议写// 建议写法if(e.stopPropagation){//如果浏览器可以使用e.stopPropagation()//就使用这个}else{e.cacelBubble = true //如果不能使用就使用这个}console.log("点击了按钮");}bigBox.onclick = function(){console.log("大盒子被点击了");}</script>
</body>
</html>
3.实现拖拽
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.bigBox{width: 500px;height: 500px;background-color: pink;position: absolute;left: 100px;top: 50px;}#box{width: 100px;height: 100px;background: red;position: absolute;}</style>
</head>
<body><div class="bigBox"><div id="box"></div></div><script>//实现拖拽//鼠标按下(onmousedown) 然后鼠标移动(onmousemove) 就会跟着动 鼠标松开(onmouseup)就不动了// offset家族的内容 只读var box = document.getElementById("box")var bigBox = document.getElementsByClassName("bigBox")[0]box.onmousedown = function(){box.onmousemove = function(e){e = e || window.event//获取大盒子的偏移var bigx = bigBox.offsetLeftvar bigy = bigBox.offsetTop//获取鼠标的位置var mouseX = e.pageXvar mouseY = e.pageY//中心点要要减去的高宽var w = box.offsetWidth/2var h = box.offsetHeight/2//定位设置left值和top值var left = mouseX - w - bigx// 鼠标坐标-原本的宽度的一半-大盒子的偏移量var top = mouseY - h - bigythis.style.left = left+"px"this.style.top = top+"px"//里面盒子的偏移量var x = box.offsetLeftvar y = box.offsetTop//区间设置if(x<0){this.style.left = "0px"}if(y<0){this.style.top = "0px"}// x y 的最大区间设置if(x>bigBox.offsetWidth-w*2){this.style.left = bigBox.offsetWidth-w*2 + "px"}if(y>bigBox.offsetHeight-h*2){this.style.top = bigBox.offsetHeight-h*2 + "px"}}}//鼠标弹起事件box.onmouseup = function(){box.onmousemove = function(){}}</script>
</body>
</html>
4.练习
1.练习1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#box{width: 500px;height: 500px;background-color: aqua;display: flex;justify-content: center;align-items: center;margin: 10px auto;}#box1{width: 100px;height: 100px;font-size: 16px;background-color: darkgoldenrod;margin-right: 10px;}#box2{width: 100px;height: 100px;font-size: 16px;background-color: darkorange;margin-left: 10px;}</style>
</head>
<body><div id="box"><div id="box1">嗨害嗐</div><div id="box2">测试测试测试测试测试</div></div><script>// 一个盒子里面有俩个小盒子 var box = document.getElementById("box") var box1 = document.getElementById("box1") var box2 = document.getElementById("box2") // 右键点击第一个小盒子换颜色 box1.onmousedown = function(e){e.stopPropagation?e.stopPropagation:e.cancelBubble = trueif(e.button == 2){this.style.backgroundColor = "#ccc"}}// 右键点击第二个小盒子 变内容 box2.onmousedown = function(e){e.stopPropagation?e.stopPropagation:e.cancelBubble = trueif(e.button == 2){this.innerText = "我是改变了的内容"}}// 点击大盒子改字体颜色box.onmousedown = function(){this.style.color = "red"// box.style.color = "red"// e = e || window.event// if( e.stopPropagation){// e.stopPropagation()// }else{// e.cancelBubble = true// }e.stopPropagation?e.stopPropagation:e.cancelBubble = true}//事件 右键出现菜单 oncontextmenu 的事件document.oncontextmenu = function(e){// return false 后面的内容不会执行 return false一般放在最后一句//如果第一个可以用就用第一个 不可以使用第二个e.preventDefault?e.preventDefault():(e.returnValue=false)}</script>
</body>
</html>
2.练习2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 500px;height: 500px;background-color: aquamarine;position: absolute;margin: 10px;}.header{width: 100%;height: 50px;background-color: blueviolet;}.content{width: 100%;height: 450PX;background-color: coral;}</style>
</head>
<body><div class="box"><div class="header"><span id="close">关闭</span></div><div class="content"></div></div><script>//1.窗口拖动和关闭,只可以点击紫色区域才可以拖拽窗口,点击关闭按钮就关闭窗口var box = document.getElementsByClassName("box")[0]//大盒子var header = document.querySelector('.header')//获取第一次的偏移量var firstL = box.offsetLeftvar firstT = box.offsetTopheader.onmousedown = function(e){//键盘按下的时候获取值e = e || window.event// var l = box.offsetLeft// var t = box.offsetTop//得到鼠标在里面的位置 鼠标的位置 - 大盒子的偏移量var currentX = e.clientX - box.offsetLeftvar currentY = e.clientY - box.offsetTopdocument.onmousemove = function(e){//移动boxe = e || window.event//得到鼠标的坐标var x = e.clientX - firstLvar y = e.clientY - firstTbox.style.left = x-currentX + "px"box.style.top = y-currentY + "px"}}//弹起取消 移动header.onmouseup = function(){document.onmousemove = nulldocument.onmouseup = null}// 点击事件 处在键盘按下和弹起之后执行document.getElementById("close").onmousedown = function(){box.style.display = "none"}</script>
</body>
</html>
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了 阻止事件冒泡和默认行为,拖拽,事件监听器使用，上面是今天的代码
JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器相关推荐
- UGUI事件之Drag拖拽事件
UI事件之Drag拖拽事件 ======================================================== 2.UGUI 事件命名空间 当我们需要使用 UGUI 中的 ...
- pc 端与移动端区分点击与拖拽事件
pc 端与移动端区分点击与拖拽事件 PC 端 移动端 在 html 的应用中,拖拽事件为 mousedown -> mousemove -> mouseup 三个事件组成,在一个有拖拽事件 ...
- JS阻止事件冒泡和默认行为
1.首先对事件冒泡和默认行为以及要用到的事件对象event有个认识 对事件冒泡的理解是当触发一个子元素的事件时,同时它的父元素的事件也会依次被触发.即事件从最低层元素依次向最外层元素触发 默认事件(行 ...
- js第8章事件案例：获取触发事件的元素，阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换
目录 1.获取触发事件的元素,阻止事件冒泡和默认行为的实现. (1)获取触发事件的元素 (2)阻止事件冒泡 (3)阻止事件默认行为 2.缓动的小球,实现的原理是通过定时器连续地修改当前DOM元素的某个 ...
- 如何阻止事件冒泡与默认事件？
[修真院小课堂]--如何阻止时间冒泡冒泡与默认事件 目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 1.背景介绍 1.什么是事件? ...
- 【JavaScript 进阶之旅 DOM篇 第九章】鼠标行为、pageX|Y封装、拖拽事件封装
文章目录 一.鼠标行为 1.clientX/Y 2.pageX/Y 3.screenX/Y 4.offsetX/Y 5.layerX/Y(不推荐使用) 6.x/y(不推荐使用) 二.pageX|Y封装 ...
- JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...
- JavaScript学习第十六天（键盘事件、表单事件、拖拽事件、框架事件、媒体事件）
文章目录 键盘事件 表单事件 剪贴板事件 拖拽事件 打印事件 框架事件 媒体事件 总结 键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...
- JavaScript拖拽事件
window.onload =function(){ /* * 拖拽box1元素* - 拖拽的流程 1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown * 2.当鼠标移动时被拖拽元素跟随 ...
最新文章
- TCP校验和的设计与实现
- MIT发布“全球最快AutoML”，刷新DARPA比赛成绩
- mysql实现日志系统_基于Hadoop/CloudBase/MySQL的日志分析系统的设计与实现
- python 查找指定文件_python实现在目录中查找指定文件的方法
- MFC获得当前应用程序目录的GetCurrentDirectory()和GetModuleFileName()函数
- 【转】C++怎么读写windows剪贴板的内容?比如说自动把一个字符串复制.
- dev c++调试怎么看变量的值_利用GDB调试 MSQL
- java中char类型可以存储两个中文字符吗
- 敏捷落地的会议和工具
- saltstack学习-1：saltstack介绍、部署、常见问题处理
- Android对Linux内核的改动你知道多少？
- 多目标优化问题的研究概述（Matlab代码实现）
- 【SIGGRAPH】用【有说服力的照片真实】技术实现最终幻想15的视觉特效
- js逆向之有道词js加密解析
- 苹果电脑python快捷键_我常用用的MAC快捷键和手势
- PDR步行者航位推算
- forward函数——浅学深度学习框架中的forward
- php开源商城系统排名,开源商城系统排名哪个好？
- FTP文件服务器的搭建
- 利用ImageJ的3D Script插件重建盆腔三维模型