JS之拖拽与碰撞检测
程序员文章站
2024-03-15 22:22:00
...
ev
为什么事件函数中有一个参数(ev)?
因为ev是事件的参数,在ev中包含了事件触发时的参数,比如click事件中的
ev.pageX,ev.pageY,keydown事件中的ev.keyCode等
在ie中.ev是全局的,可以通过windows.event来获取,在其它浏览器中,都是作为参数传入的,所有好多事件函数都这样写
myDiv.onclick = function(ev){
if(!ev){
ev=window.event;
}//if语句也可以简写成:ev=window.event||ev
}
这句话的用途:需要获取和事件相关的信息时使用,如
1.获取键盘按下或者弹起的按键
2.获取鼠标的位置坐标
3.获取事件名称
4.获取事件当前的传播阶段
5.获取事件生成的日期时间
clientX/Y
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标
客户区指的是当前窗口
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标
pageX 属性是鼠标指针的位置，相对于文档的左边缘
pageY 属性是鼠标指针的位置，相对于文档的上边缘
offsetX,offsetY 鼠标相对于被点击元素(比如div)的x坐标,y坐标拖拽代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽事件</title>
<style type="text/css">
.item{
width:100px;
height:100px;
background-color:red;
position:absolute;
left:0px;
right:0px;
}
body{
height:3000px;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
<script>
var item = document.getElementsByClassName("item")[0];
document.onmousedown = function(e){
var x = e.offsetX;
var y = e.offsetY;
document.onmousemove = function(ev){
// item.style.left = ev.clientX - x + "px";
// item.style.top = ev.clientY - y+ "px";
item.style.left = ev.pageX - x + "px";
item.style.top = ev.pageY - y+ "px";
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
</script>
</html>拖拽基础上进行碰撞检测
两个正方形,未相碰撞的时候一个红,一个蓝,碰撞时,蓝色的变成黄色<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽事件</title>
<style type="text/css">
.item{
width:100px;
height:100px;
background-color:red;
position:absolute;
left:0px;
top:0px;
}
.box{
width:100px;
height:100px;
background-color:blue;
margin:100px auto;
}
body{
height:3000px;
}
</style>
</head>
<body>
<div class="item"></div>
<div class="box"></div>
</body>
<script>
var item = document.getElementsByClassName("item")[0];
var box = document.getElementsByClassName("box")[0];
document.onmousedown = function(e){
var x = e.offsetX;
var y = e.offsetY;
document.onmousemove = function(ev){
// item.style.left = ev.clientX - x + "px";
// item.style.top = ev.clientY - y+ "px";
item.style.left = ev.pageX - x + "px";
item.style.top = ev.pageY - y+ "px";
//碰撞检测
if(item.offsetLeft+item.offsetWidth>box.offsetLeft &&
item.offsetLeft<box.offsetLeft+box.offsetWidth &&
item.offsetTop+item.offsetHeight>box.offsetHeight &&
item.offsetTop<box.offsetTop+box.offsetWidth){
box.style.backgroundColor="yellow";
}else{
box.style.backgroundColor="blue";
}
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
</script>
</html>效果截图
两个圆,未碰撞时一个蓝色一个红色,碰撞后,蓝色变成绿色<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.item{
width:100px;
height:100px;
background-color:red;
position:absolute;
left:0px;
right:0px;
}
body{
height:3000px;
}
.box{
width:150px;
height:150px;
background-color:blue;
margin:100px auto;
}
div{
border-radius:50%;
}
</style>
</head>
<body>
<div class="item"></div>
<div class="box"></div>
</body>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0];
var box = document.getElementsByClassName('box')[0];
item.onmousedown = function(e){
var x = e.offsetX;
var y = e.offsetY;
document.onmousemove = function(ev){
item.style.left = ev.pageX - x + "px";
item.style.top = ev.pageY - y + "px";
var a=item.offsetLeft+item.offsetWidth/2;
var b=box.offsetLeft+box.offsetWidth/2;
var ab=a - b;
var c=item.offsetTop+item.offsetHeight/2;
var d=box.offsetTop+box.offsetHeight/2;
var cd=c - d;
var e = ab*ab + cd*cd;
var length = Math.sqrt(e);
if(length<=125){
box.style.backgroundColor="green";
}else{
box.style.backgroundColor="blue";
}
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
</script>
</html>效果截图
这里写图片描述