JavaScript事件處理程序覆蓋？

Question

我正在嘗試將統治者添加到谷歌地圖，並提供這些統治者。

這一切都運作良好，但「刪除標尺」事件處理似乎沒有工作的權利。 （見功能「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);我將把所有那些留在那裏，以供任何在這裏絆倒的人蔘考。