本文共 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);}

测试与验证

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

注意事项

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

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

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