2013-04-26 9 views
1

다음과 같이 상상해보십시오. 당신이 제출 버튼을 클릭하면클릭 이벤트 인터럽트 제출 이벤트

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Testing event bubbling</title> 
    <script src="js/jquery/jquery-2.0.0.js"></script> 
    <script> 
     $(document).on('click', 'div', function(e) { 
      e.preventDefault(); 
      console.log('Clicked'); 
      return true; 
     }); 
     $(document).on('submit', 'form', function(e) { 
      e.preventDefault(); 
      console.log('Submitted'); 
     }); 

    </script> 
</head> 
<body> 
<form> 
    <div><div><div> 
     Click this. 
     <input type="submit"> 
    </div></div></div> 
</form> 

</body> 
</html> 

은 이제 클릭 이벤트가 캡처 된 모든 div의 아래로 전달하면 '클릭 수'를 세 번 볼 수 있습니다. 나에게 특이한 점은 양식 제출 이벤트를 건너 뛰는 것 같습니다. 클릭 바인딩을 제거하면 제출 이벤트가 올바르게 트리거됩니다. 폼에서 submit()을 수동으로 트리거하지 않고도 방법이 있습니까? 나는 click 이벤트를 좀더 구체적으로 만들 수 있기 때문에 submit 버튼에는 적용되지 않는다. 그러나 나는 이상한 유스 케이스가있다.

나는 무엇이 잘못 되었습니까? 하나의 이벤트가 트리거되면 낮은 우선 순위의 다른 모든 이벤트가 무시된다는 의미입니까?

+0

클릭시 'e.preventDefault()'를 호출하는 이유 –

+0

모든'DIV '에 대한 click 이벤트를 바인딩하고 있습니다. 그래서 그것은 3 번 보여주고 있습니다. 버튼이 # div 안에 있습니다. 클릭 이벤트가 3 번 발생하므로 – iCode

답변

1

e.preventDefault()에 무슨 일이 생긴 일부 컨트롤의 기본 동작을 방지하기 위해 사용 여부를 확인할 수 있습니다. 예를 들어, 링크를 클릭하면 href을로드하려고 시도합니다. 제출 버튼을 클릭하면 양식을 제출하려고 시도합니다. 따라서 preventDefault은 이러한 작업을 방지하는 데 사용됩니다.

제출을 "중단"하지 않으려면 양식을 제출하려면 클릭 이벤트에서 preventDefault을 제거하십시오.

이제 두 번째 지점 인 click 이벤트가 3 번 전파됩니다. 당신은 같은 있습니다

<div> 
    Div 1 
    <div> 
     Div 2 
    </div> 
</div> 

을 그리고 당신은 페이지의 모든 <div>에 온 클릭 방법을 결합하고 있습니다. 3 divs, 3 onclicks. 모든 div가 중복 된 경우 내부 div를 클릭 할 때 상위 div도 클릭하는 등의 작업을 수행합니다. 이벤트가 더 깊은 div로 전파되지 않도록하려면 stopPropagation()을 사용할 수 있습니다 (서로 "레이어"라고 생각하는 경우).

+0

Aaah ... e.preventDefault()를 제거하면 해결됩니다. 나, 어떤 이유로 인해 preventDefault()는 현재 이벤트 유형에만 영향을 미친다 고 생각했습니다. 감사! – narak

+0

다행이었습니다. jQuery 문서를 확인하는 것이 좋습니다. http://api.jquery.com/event.preventDefault/ 읽기 쉽고 몇 가지 예가 있으므로 새로운 jQuery 함수를 사용할 때 시작하는 것이 가장 좋습니다. – TheBronx

1

event.stopPropagation()을 사용하면 다른 요소에 이벤트 버블 링을 중지 할 수 있습니다. 여기를 클릭하면 e.preventDefault()으로 전화 할 필요가 없습니다. 실행중인 기본 작업이 중지되며 이는 사용자가 수행 한 작업이 아닙니다.

0

당신은 클릭이 입력 필드

$(document).on('click', 'div', function(e) { 
    if(!$(e.target).is('input')){ 
     e.preventDefault(); 
    } 
    console.log('Clicked'); 
    return true; 
}); 
$(document).on('submit', 'form', function(e) { 
    e.preventDefault(); 
    console.log('Submitted'); 
});