博客
关于我
js获取鼠标所在html元素的id和属性
阅读量:654 次
发布时间:2019-03-15

本文共 1603 字,大约阅读时间需要 5 分钟。

好的,本文将介绍如何使用JavaScript获取鼠标当前所在的HTML元素的id及其属性。由于部分回调函数在Firefox浏览器中可能不兼容,我们将分别提供适配方案。

使用getElementsFromPoint获取元素

在IE浏览器中,你可以直接使用以下方式:

function Get_srcElement(e) {  var srcElement = '';  // 确保在Firefox中兼容  var ee = window.event || e;  var tmpObj = ee.srcElement || ee.target;    // 获取元素的ID  var elementId = tmpObj.id;    // 获取元素的属性  var elementAttrs = tmpObj.getAttribute('data-attr') || '';    // 组合展示  srcElement += '事件srcElement.id : ' + elementId + ' 属性值 : ' + elementAttrs;    alert(srcElement);}

针对Firefox的修正方案

由于IE与Firefox在事件对象处理上有所不同,下面是优化后的版本,确保广泛兼容:

function Get_srcElement(e) {  var elementId = '';  var elementAttrs = '';    // 多浏览器兼容处理  var ee = e ? e : window.event;  var tmpObj = ee.srcElement ? ee.srcElement : ee.target;    // 获取元素的ID  elementId = tmpObj.id;    // 获取元素的属性值  elementAttrs = tmpObj.getAttribute('data-attr') || '';    // 示例输出:elementId : IDvalue, attribute : attributeValue  alert('当前元素ID : ' + elementId + '\n属性值 : ' + elementAttrs);}

这个函数通过使用window.event来兼容IE,同时直接访问srcElement来确保Firefox的支持。

配置更多事件属性

如果需要获取更多元素信息,可以扩展代码:

function Get_srcElement(e) {  var elementId = '';  var elementAttrs = '';  var tagName = tmpObj.tagName;    // 其他属性获取示例  elementAttrs += ', 类名 : ' + tmpObj.className;  elementAttrs += '\n 父元素ID : ' + tmpObj.parentElement.id;    alert('元素详情:\nID : ' + elementId + '\n标签 : ' + tagName + '\n属性值 : ' + elementAttrs);}

测试与验证

在实际应用中,可以考虑在事件触发时添加alertconsole.log来验证获取到的信息是否符合预期。

注意事项

  • 确保元素具有id属性,否则将显示null
  • 若需要更详细的事件信息,可以选择使用第三方库如dojo Venice等。
  • 对于XSS安全问题,应对idgetAttribute进行过滤或验证,避免被恶意利用。

通过以上方法,你可以在不同浏览器中实现获取鼠标所在HTML元素的id和属性。随着对CSS、DOM等技术的深入理解,你还可以进一步优化代码和功能。

转载地址:http://zjcmz.baihongyu.com/

你可能感兴趣的文章
Netty源码—5.Pipeline和Handler一
查看>>
Netty源码—5.Pipeline和Handler二
查看>>
Netty源码—6.ByteBuf原理一
查看>>
Netty源码—6.ByteBuf原理二
查看>>
Netty源码—7.ByteBuf原理三
查看>>
Netty源码—7.ByteBuf原理四
查看>>
Netty源码—8.编解码原理一
查看>>
Netty源码—8.编解码原理二
查看>>
Netty源码解读
查看>>
Netty的Socket编程详解-搭建服务端与客户端并进行数据传输
查看>>
Netty相关
查看>>
Netty遇到TCP发送缓冲区满了 写半包操作该如何处理
查看>>
Netty:ChannelPipeline和ChannelHandler为什么会鬼混在一起?
查看>>
Netty:原理架构解析
查看>>
Network Dissection:Quantifying Interpretability of Deep Visual Representations(深层视觉表征的量化解释)
查看>>
Network Sniffer and Connection Analyzer
查看>>
Network 灰鸽宝典【目录】
查看>>
NetworkX系列教程(11)-graph和其他数据格式转换
查看>>
Networkx读取军械调查-ITN综合传输网络?/读取GML文件
查看>>
network小学习
查看>>