js获取点击事件的位置，兼容主流浏览器
16lz
2021-01-22
在前端开发中，会遇到使用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
下面是我无意中阅读一本关于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
更多相关文章
- contains和compareDocumentPosition 方法来确定是否HTML节点间的
- Javascript XML DOM将属性设置为特定元素
- 控制台在node . js中没有“debug”方法吗?
- 利用javascript动态加载头部出现点击事件与hover事件无效解决方
- 获取JavaScript数组元素的最大长度
- 类似jQuery的extend扩展方法的实现
- 获取html DOM元素内容的边框
- 是否有办法阻止contenteditable的插入符号出现在IE10的元素上?
- 如何在onchange（）事件后调用的方法中将焦点设置为输入字段？