Javascript事件处理程序覆盖？

Question

我正在尝试将标尺添加到Google地图并提供这些标尺。

一切正常，但“删除标尺”事件处理程序似乎无法正常工作。 （参见“addLine”函数）

// Set up the event handler for the remove ruler button
document.getElementById('delruler' + num).onclick = function() {removeLine(num); return false;}

最终发生的事情是我可以删除我添加的最后一个标尺，但不能删除之前的任何标尺。我可以进入控制台并输入removeLine(3)并删除＃3行，所以我很确定其余部分正在运行......这只是被覆盖的事件处理程序还是什么？

这应该是为div设置名为“delruler1”，“delruler2”等的事件处理程序......我有什么问题？完整代码如下。谢谢你的帮助。

var lines = new Array();

function addruler() {
var ruler1 = new google.maps.Marker({
    position: map.getCenter() ,
    map: map,
    draggable: true
});
var ruler2 = new google.maps.Marker({
    position: map.getCenter() ,
    map: map,
    draggable: true
});
var ruler1label = new Label({ map: map });
var ruler2label = new Label({ map: map });
ruler1label.bindTo('position', ruler1, 'position');
ruler2label.bindTo('position', ruler2, 'position');
var rulerpoly = new google.maps.Polyline({
    path: [ruler1.position, ruler2.position] ,
    strokeColor: "#0098b5",
    strokeOpacity: .7,
    strokeWeight: 7
});
rulerpoly.setMap(map);
ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
google.maps.event.addListener(ruler1, 'drag', function() {
    rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
    ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
    ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
});
google.maps.event.addListener(ruler2, 'drag', function() {
    rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
    ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
    ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
});
// Add our new ruler to an array for later reference
lines.push([ruler1, ruler2, ruler1label, ruler2label, rulerpoly]);
addLine(lines.length - 1);
}

function addLine (num) {
// This function adds a line to our page.
var div = document.getElementById('latlon');
var oldHTML = document.getElementById('latlon').innerHTML;
div.innerHTML = oldHTML + "<div id='ruler" + num + "'><span id='latlon_dir'><input type='text' name='dir' id='dir' length='2' /></span><span id='latlon_street'><input type='text' name='street' id='street' length='30' /></span><span id='latlon_traffic'><input type='text' name='traffic' id='traffic' length='6' /></span><span id='latlon_speed'><input type='text' name='speed' id='speed' length='2' /></span><span id='latlon_stop'><select name='stop' id='stop'><option value='Y'>Yes</option><option value='N'>No</option></select> </span><span id='latlon_viewdistance'><input type='text' name='viewingdistance' id='viewingdistance' length='10' /></span><span><button type='button' class='delruler' id='delruler" + num + "' >Delete Ruler</button></span><br>";
// Set up the event handler for the remove ruler button
document.getElementById('delruler' + num).onclick = function() {removeLine(num); return;}
}

function removeLine (num) {
// Removes the line from our HTML page
var div = document.getElementById('ruler' + num);
div.parentNode.removeChild(div);
removeRuler(lines[num]);
}

function removeRuler (r) {
// Now we remove the ruler.
// I've unpacked the variables for readability.
var ruler1=r[0]; var ruler2=r[1]; var ruler1label=r[2]; var ruler2label=r[3]; var rulerpoly=r[4];
google.maps.event.clearListeners(ruler1, 'drag');
ruler1.setMap(null);
google.maps.event.clearListeners(ruler2, 'drag');
ruler2.setMap(null);
ruler1label.setMap(null);
ruler2label.setMap(null);
rulerpoly.setMap(null);
}

function distance(lat1,lon1,lat2,lon2) {
var R = 3959; // Here's the right settings for miles and feet
var dLat = (lat2-lat1) * Math.PI / 180;
var dLon = (lon2-lon1) * Math.PI / 180; 
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) * 
    Math.sin(dLon/2) * Math.sin(dLon/2); 
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
var d = R * c;
if (d>1) return Math.round(d)+"mi";
else if (d<=1) return Math.round(d*5280)+"ft";
return d;
}

Answer 1

Javascript 将覆盖事件处理程序，document.getElementById(...)会返回一个包含少量变量的对象。您可以通过在浏览器的开发者控制台中运行以下代码来证明这一点：

$.each(document.getElementById("comments-link-16801451"), function(key, data) { console.log(key + ' - ' + data); });

在此页面上返回：

现在回到你的问题，来自onclick返回的对象的getElementById属性只是一个带有匿名函数的变量，因为它的值。这可以通过在开发者控制台中运行来证明：

document.getElementById("comments-link-16801451").onclick = function() { console.log("test"); };
document.getElementById("comments-link-16801451").onclick();

编辑：我读错了你的问题。在removeLine函数中，document.getElementById('ruler' + num);应为document.getElementById('delruler' + num);我将把所有内容留在那里，以供将来偶然发现的任何人参考。