Question

我的一个队友在不久前编写了一些代码，这些代码在HTML页面中导航了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中打开其中一个模态时，我得到控制台输出“TypeError：editImage.srcElement is undefined”

我的问题是，是否有更“正确”的方式来访问适用于任何浏览器的数据，或者我是否需要检查我所在的浏览器并以不同的方式访问该信息，具体取决于浏览器使用

Answer 1

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

不幸的是，即使是标准的API也不总是适用于所有浏览器。通常，标准的一部分是通过邮件实现的。检查权威来源对于了解支持的位置至关重要。

其他资源：

HTML，CSS，XML和其他许多人的World Wide Web Consortium（W3C）
JavaScript的European Computer Manufacturer's Association（ECMA）
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 。

Answer 2

该函数$(document).ready(function() { var api = "43881a1bf31fb1b7225348b3f7839a9d"; var userCity; $.getJSON("http://ip-api.com/json", function(json, userCity) { userCity = JSON.stringify(json.city); userCity = city.replace(/\"/g,""); }); $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + userCity + "&units=metric&appid=" + api, function(json, userCity) { var name = JSON.stringify(json.name + ", " + json.sys.country); var temp = JSON.stringify(json.main.temp); var icon = JSON.stringify(json.weather[0].icon); var type = JSON.stringify(json.weather[0].main); icon = icon.replace(/\"/g,""); type = type.replace(/\"/g,""); temp = Math.round(temp); //update h2 with city, country and temperature and testing to see what weather.icon is but comes back as undefined $("#temp h2").text("The temperature in " + name + " is " + temp + "°C "); //updates h3 with the type of weather & city is placeholder for testing the city variable $("#temp h3").text(type); //display image of weather type from https://openweathermap.org/weather-conditions $("#temp img").attr("src", "http://openweathermap.org/img/w/" + icon + ".png"); }); });可能是一个事件监听器，因此参数showModal实际上是一个editImage对象。

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

简而言之：使用目标，或者，如果您需要支持旧版Internet Explorer，请尝试使用srcElement。

Answer 3

srcElement来自IE。标准属性为target。

你应该这样做：

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

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

3 个答案: