<div style="width:200px;height:200px;background:#ff0000;position:relative" id="dvEvent">
<div style="width:200px;height:200px;background:#000000;position:absolute;left:50px;top:50px;"></div>
</div>
<script type="text/javascript">
window.onload = function () {
var dv = document.getElementById('dvEvent');
var p = { x: dv.offsetLeft, rx: dv.offsetWidth, y: dv.offsetTop, by: dv.offsetHeight };
while (dv = dv.offsetParent) { p.x += dv.offsetLeft; p.y += dv.offsetTop; }
p.rx += p.x; p.by += p.y; document.getElementById('dvEvent').onclick = function (e) {
e = e || window.event;
var x = e.clientX, y = e.clientY;
document.title = p.x + '|' + x + '|' + p.rx + '-' + p.y + '|' + y + '|' + p.by;
if ((x >= p.x && x <= p.rx) && (y >= p.y && y <= p.by)) alert('点击在范围内，触发事件！');
}
}
</script>
如果是做鼠标移入和移除触发事件,该如何写,小弟JS不才...求解答
<div style="width:200px;height:200px;background:#000000;position:absolute;left:50px;top:50px;"></div>
</div>
<script type="text/javascript">
window.onload = function () {
var dv = document.getElementById('dvEvent');
var p = { x: dv.offsetLeft, rx: dv.offsetWidth, y: dv.offsetTop, by: dv.offsetHeight };
while (dv = dv.offsetParent) { p.x += dv.offsetLeft; p.y += dv.offsetTop; }
p.rx += p.x; p.by += p.y; document.getElementById('dvEvent').onclick = function (e) {
e = e || window.event;
var x = e.clientX, y = e.clientY;
document.title = p.x + '|' + x + '|' + p.rx + '-' + p.y + '|' + y + '|' + p.by;
if ((x >= p.x && x <= p.rx) && (y >= p.y && y <= p.by)) alert('点击在范围内，触发事件！');
}
}
</script>
如果是做鼠标移入和移除触发事件,该如何写,小弟JS不才...求解答
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
</head><body>
<div style="width:200px;height:200px;background:#ff0000;position:relative" id="dvEvent">
<div style="width:200px;height:200px;background:#000000;position:absolute;left:50px;top:50px;"></div>
</div>
<script type="text/javascript">
$(function() {
var dv = document.getElementById('dvEvent');
var p = { x: dv.offsetLeft, rx: dv.offsetWidth, y: dv.offsetTop, by: dv.offsetHeight };
while (dv = dv.offsetParent) { p.x += dv.offsetLeft; p.y += dv.offsetTop; }
p.rx += p.x; p.by += p.y;
var overHandler = function(e) {
var x = e.clientX, y = e.clientY;
document.title = p.x + '|' + x + '|' + p.rx + '-' + p.y + '|' + y + '|' + p.by;
if ((x >= p.x && x <= p.rx) && (y >= p.y && y <= p.by)) alert('over事件');
};
var outHandler = function(e) {
var x = e.clientX, y = e.clientY;
document.title = p.x + '|' + x + '|' + p.rx + '-' + p.y + '|' + y + '|' + p.by;
alert('out事件');
if ((x >= p.x && x <= p.rx) && (y >= p.y && y <= p.by)) alert('out事件');
}
$("#dvEvent").hover(overHandler,outHandler);
});
</script>
</body>
</html>