다음과 같이 상상해보십시오. 당신이 제출 버튼을 클릭하면클릭 이벤트 인터럽트 제출 이벤트
<!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 버튼에는 적용되지 않는다. 그러나 나는 이상한 유스 케이스가있다.
나는 무엇이 잘못 되었습니까? 하나의 이벤트가 트리거되면 낮은 우선 순위의 다른 모든 이벤트가 무시된다는 의미입니까?
클릭시 'e.preventDefault()'를 호출하는 이유 –
모든'DIV '에 대한 click 이벤트를 바인딩하고 있습니다. 그래서 그것은 3 번 보여주고 있습니다. 버튼이 # div 안에 있습니다. 클릭 이벤트가 3 번 발생하므로 – iCode