이벤트 bubbling_jquery를 방지하는 jQuery의 특정 구현

다음은 html 코드 부분입니다.

코드 복사 코드는 다음과 같습니다.

외부 div 요소
내부 범위 요소
외부 div 요소

에 해당하는 jQuery 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

다음과 같이 수정하세요.

코드 복사

코드는 다음과 같습니다.$(function(){ // 클릭 이벤트를 범위 요소에 바인딩

$('span').bind("click",function(event){

var txt = $( '#msg').html() "

내부 범위 요소를 클릭했습니다.

";
$('#msg').html(txt);
event.stopPropagation(); // 이벤트 버블링 중지
});
// 클릭 이벤트를 div 요소에 바인딩
$('#content').bind("click",function(event){
var txt = $('#msg').html() "

외부 div 요소를 클릭했습니다.

";
var txt = $('#msg') .html( txt);
event.stopPropagation(); // 이벤트 버블링 방지
});
// 클릭 이벤트를 본문 요소에 바인딩
$("body").bind(" click ",function(){
var txt = $('#msg').html() "

body 요소를 클릭했습니다.

";
var txt = $ ('#msg').html() ).html(txt);
});
})




event.stopPropagation(); // 이벤트 버블링 중지

때때로 제출 버튼을 클릭하면 기본 이벤트가 발생하는 경우가 있습니다. 예를 들어, 다른 인터페이스로 점프합니다. 하지만 검증을 통과하지 못한 경우 점프해서는 안 됩니다. 이때 event.preventDefault(); //기본 동작(양식 제출)을 방지하도록 설정할 수 있습니다.

다음과 같은 경우입니다.

코드 복사

코드는 다음과 같습니다.

html 부분:

코드 복사 코드는 다음과 같습니다.

사용자 이름:

기본 동작을 방지하는 또 다른 방법은 false를 반환하는 것입니다. 효과는 동일합니다.

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

$('span').bind("click",function(event){ var txt = 달러                                   ;

});

// 클릭 이벤트를 다음에 바인딩합니다. div 요소
$('#content').bind("click",function(event){
var txt = $(' #msg').html() "

외부 div 요소 클릭했습니다.

";
                                                                                                          
});
// 클릭 이벤트를 본문 요소에 바인딩
$("body").bind("click",function (){
var txt = $('#msg' ).html() "

본문 요소를 클릭했습니다.

";