如果要兼容浏览器，最好使用一个库来实现，用鼠标的页面位置减去的页面位置就行了。
比如jquery：
$(document)click(function(e){
alert("X: " + (epageX - $('img')offset()left) + ", Y: " + (epageY - $('top')offset()top));
});
JavaScript鼠标事件,点击鼠标右键,d出div的简单实例
documentoncontextmenu
=
function(){return
false};
//禁止鼠标右键菜单显示
var
res
=
documentgetElementById('box');
//找到id为box的div
documentbodyonmouseup
=
function(e){
//在body里点击触发事件
if(ebutton===2){
//如果button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）
consolelog(e);
//将传进去的参数打印出来
consolelog(eoffsetY);
//打印出鼠标点击的Y轴坐标
consolelog(eoffsetX);
//打印出鼠标点击的X轴坐标
resstyletop
=
eoffsetY+'px';
//鼠标点击时给div定位Y轴
resstyleleft
=
eoffsetX+'px';
//鼠标点击时给div定位X轴
resstyledisplay
=
'block';
//显示div盒子
}else{
resstyledisplay
=
'none';
//否则不显示div盒子
}
}
以上这篇JavaScript鼠标事件,点击鼠标右键,d出div的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：indexhtml。
2、在indexhtml中的<script>标签，输入js代码：var e = event || windowevent;documentbodyinnerText = eclientX + ',' + eclientY;。
3、浏览器运行indexhtml页面，此时会打印出鼠标的当前位置坐标。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jqueryjs"></script>
</head>
<body>
<ul>
<li ><a href="#" tittle="icon/one1_03png"><b><img src="icon/one_03png" /></b></a></li>
<li ><a href="#" tittle="icon/two2_03png"><img src="icon/two_03png" /></a></li>
<li ><a href="javascript:goMenu('menu_businesshtml')" tittle="icon/three3_03png"><img src="icon/three_03png" /></a></li>
<li ><a href="#" tittle="icon/four4_03png" ><img src="icon/four_03png" /></a></li>
<li ><a href="#" tittle="icon/five5_03png" ><img src="icon/five_03png" /></a></li>
<li ><a href="#" tittle="icon/six6_03png" ><img src="icon/six_03png" /></a></li>
<li ><a href="#" tittle="icon/seven7_03png" ><img src="icon/seven_03png" /></a></li>
<div class="clear"></div>
</ul>
</body>
</html>
<script language="javascript">
$(function(){
var prevOne=null;
$('li')click(function(){
if(prevOne||prevOne==0){
$('li')eq(prevOne)css('background','red');
}
$(this)css('background','yellow');
prevOne=$(this)index();
})
})
</script>
用jquery库写就更简单呀,如这样:
$(function(){$('div#libox li')mouseover(function(){alert($(this)find('span')html());});
});
以上就是关于js获取鼠标点击事件的相对位置全部的内容，包括:js获取鼠标点击事件的相对位置、JavaScript鼠标事件,点击鼠标右键,d出div的简单实例、html,js如何获取当前鼠标位置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）