0

使用此代码，我试图迭代从 json 数组派生的数组。页面内有一个 SVG。当我单击一个国家/地区时，该名称应提交到 URL。不幸的是，我在 -->error 指示的行收到以下错误

未捕获的 TypeError：无法调用 null 的方法“addEventListener”

我怎样才能克服这个错误？为什么会发生？

数组是这样的：

{"Countries":["india","switzerland","usa","alaska","germany","austria","netherlands","france","italy","spain","poland","hungary","czech","romania","russia","china","mexico","brazil","britain","thailand","sweden","uae","new_zealand_north_island","new_zealand_south_island","egypt"]}




var mySVG = document.getElementById("VectorMap");
var svgDoc;
mySVG.addEventListener("load", function () {
    svgDoc = mySVG.contentDocument;

    $.getJSON("http://www.someurl.com/jsonArray",
        function (data) {
            $.each(data, function (index, item) {

              var i=0;
              for (tot=item.length; i < tot; i++) {
                var someElement = svgDoc.getElementById(item[i]);
                 //--->error
                 someElement.addEventListener("mousedown", function () {
                     $("#info").html(ajax_load).load("http://www.someurl.com/returnData"+"?country="+text);

                 }, false);    //add behaviour
              }

            });
        });
}, false);
4

2 回答 2

1

在尝试附加事件处理程序之前，您没有检查元素是否存在；如果元素不存在，getElementById()将返回null. 该代码将进行该检查。

var someElement;

for (var i = 0, tot = item.length; i < tot; i++) {
    someElement = svgDoc.getElementById(item[i]);

    if (someElement) {
        someElement.addEventListener("mousedown", function () {
           $("#info")
              .html(ajax_load)
              .load("http://www.someurl.com/returnData"+"?country="+text);    
        }, false);    //add behaviour
    }
}
于 2013-10-19T01:28:03.640 回答
0

发生异常是因为页面中没有id给定的元素。在这种情况下，getElementById返回null：您可以通过浏览器中的 Web 控制台/调试器检查，这是什么id不存在，以及它是否应该存在 - 因此您有错误或拼写错误。

无论如何，您可以利用 jQuery。因为在 jQuery 中您可以传递一个 id 列表，并且监听器将仅附加到页面中实际存在的那些元素，而不会引发异常。所以在你的情况下，而不是：

var i=0;
for (tot=item.length; i < tot; i++) {
  var someElement = svgDoc.getElementById(item[i]);
   //--->error
   someElement.addEventListener("mousedown", function () {
       $("#info").html(ajax_load).load("http://www.someurl.com/returnData"+"?country="+text);

   }, false);    //add behaviour
}

你可以简单地拥有：

$('#' + item.join(', #')).on('mousedown', function() {
   $("#info").html(ajax_load).load("http://www.someurl.com/returnData"+"?country="+text);
});

所以基本上，假设是一个具有普通 iditem的数组（因此我会调用它），例如，您将获得作为字符串传递给 jQuery：如果页面中不存在这些元素上的任何元素，则 mousedown 侦听器只是赢了'不附加，不引发任何错误。items['a', 'b', 'c']'#' + item.join(', #')"#a, #b, #c"

注意：不确定这个text变量来自哪里，我只是放在那里，因为在你原来的例子中。

于 2013-10-19T07:34:00.300 回答