JavaScript中DOM元素的跨浏览器导航

我的一位队友写了一些关于短时间内的代码，该代码浏览了HTML页面中的DOM元素，以便根据已有数据预先填充模块中的某些字段对象（模式允许用户编辑该数据）。这些项目通常从数据库表中生成。JavaScript中DOM元素的跨浏览器导航

function showModal(editImage) { 
    var modal = document.getElementById('myModal'); 
    var span = document.getElementsByClassName("close")[0]; 
    var nameAndTitle = editImage.srcElement.parentElement.innerHTML; 
    var parent = editImage.srcElement.parentElement.parentElement; 
    etc....

问题是，他们只测试了它在Chrome中的工作。看起来，代码从未在Firefox中工作过。当我尝试在Firefox中打开模态之一，我得到的控制台输出“类型错误：editImage.srcElement是未定义”

我的问题是，有没有更“正确”的方式来访问这些数据，会为工作任何浏览器，还是我需要检查我所在的浏览器，并根据使用的浏览器以不同的方式访问这些信息？

来源

2016-12-06 icaughtfireonce

看看[Document.querySelector（https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector）（这也适用于HTML元素）。 – gyre

您的直接答案是：将srcElement更改为target。 Mozilla开发者网络是一个很好的（很多）资源之一，用于检查标准符合性。 A visit to their site对于srcElement表示它是非标准的，并以正确的方式提出建议（target）。

不幸的是，即使是标准的API也不一定适用于所有浏览器。通常，一个标准的部分被实现了piecemail。使用权威来源进行检查对于了解哪些地方支持至关重要。

其他资源：

的World Wide Web Consortium（W3C）对HTML，CSS，XML和许多其他
为JavaScript

European Computer Manufacturer's Association

CanIUse.com适合快速兼容性合规检查

至于你明确的问题：

“我的问题是，有没有更‘正确’的方式来访问这些数据，会为所有浏览器中工作，或者我需要检查我是什么浏览器，并根据浏览器访问一个不同的方式信息正在使用？”

使用标准和检查支持（通过我上面提供的资源）必须在跨浏览器代码的最好机会。

不写检查浏览器类型和版本，看看你的代码将运行（浏览器检测）的代码，因为：

有太多的浏览器和太多的版本 - 这很烂！
浏览器可以和会骗你对他们是什么！

使用 “功能检测” 有疑问时。特征检测是评估特征是否存在的代码，如果存在则使用它。如果它没有提供回退。下面是IE8（或更低）的浏览器很常见的一个还不支持W3C标准的事件处理：

// Here we are attempting to obtain the value of the 
// addEventListener property of the window object. 
// IE 8 doesn't implement this property so "undefined" 
// will be returned. But, because we are attempting to 
// use the value as the condition of an if/then construct 
// "undefined" will be converted to a boolean. "undefined" 
// is a "falsey" value, so it will convert to false. 
// This means that if the else portion of our construct 
// is reached, we have a browser that doesn't support 
// addEventListener 
if(window.addEventListener){ 
    // W3C standards are supported - do things the standard way 
    obj.addEventListener("click", someFunction, capture); 
} else { 
    // Must be IE 8 or less - do things the IE way 
    obj.attachEvent("onclick", someFunction); 
}

这只是一个方式来使用功能检测，但它通常取决于一个值转换成一个布尔值。查看更多关于它here。

来源

2016-12-06 21:57:43

该函数showModal可能是一个事件侦听器，所以参数editImage实际上是一个Event对象。

因此，报告事件来源的实际属性（也是Firefox支持的唯一属性）是目标，而srcElement是由Microsoft和基于Webkit/Blink的浏览器创建的遗留属性，它一直支持它兼容性。但不是Firefox。

简而言之：使用目标或者，如果您需要支持旧版本的Internet Explorer，请尝试使用(editImage.target || editImage.srcElement)。

来源

2016-12-06 21:59:35 MaxArt

srcElement来自IE。标准房产是target。

你应该这样做：

var target = editImage.srcElement || editImage.target;

来源

2016-12-06 22:00:19 mattias

除非你必须支持IE 8或更低版本，否则只需使用'target'即可。 –

JavaScript中DOM元素的跨浏览器导航

回答

相关问题