JS判断碰撞方法：
复制代码代码如下:
/** 判断是否碰撞
* @param obj 原对象
* @param dobj 目标对象
*/
function impact(obj, dobj) {
var o = {
x: getDefaultStyle(obj, 'left'),
y: getDefaultStyle(obj, 'top'),
w: getDefaultStyle(obj, 'width'),
h: getDefaultStyle(obj, 'height')
}
var d = {
x: getDefaultStyle(dobj, 'left'),
y: getDefaultStyle(dobj, 'top'),
w: getDefaultStyle(dobj, 'width'),
h: getDefaultStyle(dobj, 'height')
}
var px, py
px = o.x <= d.x ? d.x : o.x
py = o.y <= d.y ? d.y : o.y
// 判断点是否都在两个对象中
if (px >= o.x &&px <= o.x + o.w &&py >= o.y &&py <= o.y + o.h &&px >= d.x &&px <= d.x + d.w &&py >= d.y &&py <= d.y + d.h) {
return true
} else {
return false
}
}
/** 获取对象属性
* @param obj 对象
* @param attribute 属性
*/
function getDefaultStyle(obj, attribute) {
return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute])
}
示例如下：
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>demo </title>
<style type="text/css">
body{margin:0px}
.main{position:relative}
#f1{position:absolutebackground:#FF0000top:100pxleft:100pxwidth:200pxheight:200pxz-index:999}
#f2{position:absolutebackground:#FFFF00top:0pxleft:0pxwidth:600pxheight:150px}
</style>
</head>
<body>
<div class="main">
<div id="f1"></div>
<div id="f2"></div>
</div>
<script type="text/javascript">
var o = document.getElementById("f1")
var d = document.getElementById("f2")
alert(impact(o, d))
function impact(obj, dobj) {
var o = {
x: getDefaultStyle(obj, 'left'),
y: getDefaultStyle(obj, 'top'),
w: getDefaultStyle(obj, 'width'),
h: getDefaultStyle(obj, 'height')
}
var d = {
x: getDefaultStyle(dobj, 'left'),
y: getDefaultStyle(dobj, 'top'),
w: getDefaultStyle(dobj, 'width'),
h: getDefaultStyle(dobj, 'height')
}
var px, py
px = o.x <= d.x ? d.x : o.x
py = o.y <= d.y ? d.y : o.y
// 判断点是否都在两个对象中
if (px >= o.x &&px <= o.x + o.w &&py >= o.y &&py <= o.y + o.h &&px >= d.x &&px <= d.x + d.w &&py >= d.y &&py <= d.y + d.h) {
return true
} else {
return false
}
}
function getDefaultStyle(obj, attribute) {
return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute])
}
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
监听方法在js中的实现如下：function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])eventFlag : 事件名称，如click、mouseover…eventFunc: 绑定到事件中执行的动作useCapture: 指定是否绑定在捕获阶段，true为是，false为否，默认为true在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流IE中使用自有的attachEvent函数绑定时间，函数定义如下：function attachEvent(string eventFlag, function eventFunc)eventFlag: 事件名称，但要加上on，如onclick、onmouseover…eventFunc: 绑定到事件中执行的动作在事件监听流中可以使用window.event.cacenlBubble=false来阻止事件继续往下流总结：addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])，针对ff，chrome，safari浏览器，false指冒泡阶段，默认为true，指捕获阶段。不过一般我们都用false。 attachEvent(string eventFlag, function eventFunc)，针对ie系列、还有opera浏览器，少了事件处理机制的参数，只指定事件类型（别忘了on）和触发哪个函数。js的监听事件就是相当于注册一个监听器，随时检测对应事件有没有发生，如果发生了自动调用定义好的函数来处理。一般情况下 监听事件是对应于dom元素而言的，同时也需要声明所监听事件种类。
比如可以为一个按钮设置监听事件，点击之后自动调用相应函数处理。
同时可以在用函数处理时使用事件对象（event object）来获得关于触发这个事件的对象的信息。
