您的位置：首页 > Web前端 > JavaScript

JS之拖拽与碰撞检测

2018-03-15 21:32 447 查看

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>


效果截图







这里写图片描述
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ev pageX clientY offsetX pageY
相关文章推荐
新的分享
章节导航