js获取点击事件的位置，兼容主流浏览器

本文主要是介绍js获取点击事件的位置，兼容主流浏览器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在前端开发中，会遇到使用js获取鼠标点击的位置这样的问题，看到网上有很多获取的方法，但是偶尔会出现浏览器不兼容的问题。
下面是我无意中阅读一本关于h5的书，从中找到的一个实现方法。


例如我要在页面中创建一个元素，并添加一个js方法给这个元素，通常的写法是：
$('#mainImgDiv').append('<img class="ht-img" src="xxxx"');


然后在js部分写
$(".ht-img").click(function(){
event.offsetX;
event.offsetY;
});
获取点击的坐标，发现不同系统不同浏览器中结果并不相同。


下面是我的解决过程：
创建元素：
var imgn = document.createElement('img');
$(imgn).attr("class", "ht-img");
$(imgn).attr("src", "xxxx");
imgn.addEventListener("click", clickImg, false);


对应的js方法：
function clickImg(ev){
var mx;
var my;
if(ev.layerX || ev.layerX == 0){
mx = ev.layerX;
my = ev.layerY;
}else if(ev.offsetX || ev.offsetX == 0){
mx = ev.offsetX;
my = ev.offsetY;
}
}


已经过测试，在ubuntu和window系统中兼容主流浏览器。


上面提到的那本关于h5的书叫《HTML5游戏开发》，可以在下面地址下载或者给我留言，我发给你，下载地址如下：
http://download.csdn.net/download/u013276512/9948075

这篇关于js获取点击事件的位置，兼容主流浏览器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---