이벤트 핸들러 이해

Question

연습으로 ebay.com 요소에 이벤트 리스너를 추가하려고합니다.

예상 결과 : 경고를 표시하고 웹 페이지가 다음 URL로 이동하지 못하도록합니다.

경고 : 경고가 표시되지만 다음 URL이 표시됩니다.

preventDefault, stopPropagtion 및 stopImmediatePropagation을 테스트하고있는 제품 페이지에서 흥미로운 것을 발견했습니다.

내가 어떤 조합을 사용하든 관계없이 아무 것도 작동하지 않는 것 같습니다.

$('#binBtn_btn').click(function(evt){ 
    alert('hi'); 
    evt.stopPropagation(); //or any other option. 
}); 

것은 내가 경고를받을 것입니다,하지만 난 전파를 결코 멈추지 않았다 것처럼 여전히 다음 페이지로 이동 -

기본 코드입니다.

이벤트 처리에 관한 많은 기사를 읽었지만 대답을 찾을 수 없습니다. 귀하의 도움을 많이 주시면 감사하겠습니다. 이 같은 evt.preventDefault()를 사용

Answer 1

내 생각에 Button에는 자체 클릭 핸들러가 있으며 내 앞에 놓여 있습니다.

$('#binBtn_btn').data("events")은 실제로 click 이벤트가 있음을 보여줍니다. off을 사용하여 제거하십시오.

$('#binBtn_btn').off('click'); 

버튼을 클릭하면 제출하는 양식이 계속 표시됩니다. 이제는 페이지를 탐색하는 것뿐입니다. 버튼은 실제로는 a 태그입니다.

$('#binBtn_btn').click(function(e){ 
    alert('Gotcha!'); 
    e.preventDefault(); 
}); 

우리를 추가,의 우리가 자신의 핸들러를 제거하면 어떻게되는지 보자, 다음 자신의 일 ...

var existing = $('#binBtn_btn').data('events').click[0]; 
$('#binBtn_btn').off('click'); 
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); return false; }); 
$('#binBtn_btn').data('events').click.push(existing); 

동일하지만, 단지의 기능을보고 다시 추가

var existing = $('#binBtn_btn').data('events').click[0].handler; 
$('#binBtn_btn').off('click'); 
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); e.preventDefault(); }); 
$('#binBtn_btn').click(existing); 

으로 예상 (오히려 ... 직접 events.click 배열을 조정 제외) 클릭 처리기 이제 두 번째 처리기 인 처리기가 먼저 처리되지 않습니다. (e.preventDefault();이 아닌 e.preventDefault();을 추가했습니다.)

중단 점을 배치하고 위의 existing var를 보면 무엇을하는지 확인할 수 있습니다. 기능이 끝나면 실제로는 e.preventDefault();으로 전화를 걸음을 알 수 있습니다.

희망이 도움이됩니다.

Answer 2

시도 :

$('#binBtn_btn').click(function(evt){ 

    evt.preventDefault(); 
    alert('hi'); 

}); 

는 그 다음 다음 페이지로 이동하지 않습니다.