자바 스크립트 이벤트 핸들러를 덮어 쓰시겠습니까?

Question

Google지도에 눈금자를 추가하려고합니다.

모두 잘 작동하지만 "Delete Ruler"이벤트 처리기가 올바르게 작동하지 않는 것 같습니다.

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

은 어떤 일이 끝나는 것은 내가 추가 한 마지막 통치자를 삭제할 수있다 (기능 "addLine"을 참조하십시오),하지만 모든 IT 전에 사람의. 나는 콘솔에 들어가서 removeLine(3)을 타이프하고 # 3 줄을 지울 수 있기 때문에 그 나머지가 작동하고 있다고 확신 할 수 있습니다 ... 그것은 겹쳐 쓰여지는 이벤트 핸들러 일뿐입니다.

"delruler1", "delruler2"등 div의 이벤트 핸들러를 설정해야합니다. 내가 잘못 했습니까? 전체 코드는 다음과 같습니다. 도와 줘서 고마워.

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

는 자바 스크립트 는 것이다 덮어 쓰기 이벤트 핸들러, 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);이어야합니다. 앞으로 건너 뛴 사람에 대해 나중에 참조 할 수 있도록 모든 정보를 남겨 두겠습니다.