하나의 큰 div 안에 작은 div를 감싸고, 안의 작은 div의 클릭 이벤트는 바깥의 이 큰 div의 클릭 이벤트를 촉발하지 않습니다.

처음에 html 코드를 올렸어요.

"div1" style="background: blue;width: 100px; height: 100px;">
        
"div2" style="background: red;width: 70px; height: 70px;">
        

바로 이런 코드입니다.
큰div=>div1
작은 div=>div2
코드

$('#div1').click(function(e) {
    alert('div1');
})
$('#div2').click(function(e) {
    alert('div2');
})

정상적으로 이렇게 클릭 코드를 쓰면 div2에 있는 이 구역을 클릭하면div1의 클릭 이벤트를 터치합니다. 바로 div2-->div1이 먼저 팝업됩니다.
하지만 내가 원하는 효과는 div2 구역을 누르고 싶을 때 div2만 뜨는 거예요.
 
 
그럼 지금 여기에 두 가지 방안이 있습니다. 그리고 또 다른 것은 환영합니다.
첫 번째, 거품이 생겨서 거품을 막습니다.

$('#div1').click(function(e) {
    alert('div1');
})
$('#div2').click(function(e) {
    e.stopPropagation()
    alert('div2');
})

이렇게 하면 div2 구역을 클릭하면 div2만 팝업됩니다
div1을 누르면 div1만 떠요.
두 번째, div2가 div1에 덮여 있기 때문에 그곳을 클릭하든 div1을 촉발한 구역이기 때문에 클릭할 때 이 구역이 div2의 구역인지 아닌지를 판단하고, 그렇지 않으면 div2를 촉발한다. 그렇지 않으면 div1을 촉발한다.

 $('#div1').click(function(e){
     // e.preventDefault();
     if($(e.target).is('#div2')){
         alert('div2')
     }else{
         alert('div1')
     }
 })

 
 
 
자, 제가 시도해 본 것이 바로 이 두 가지 방안입니다. 여러분의 가르침과 보완을 환영합니다.
 
 
 
두 개의 div 밖에 a탭이 있다면 큰 div를 눌렀을 때 링크를 돌리고 작은 div를 눌렀을 때 다른 동작을 수행하려면
html 구조 코드는 다음과 같다.

   'http://www.baidu.com'>
"div1" style="background: blue;width: 100px; height: 100px;">
"div2" style="background: red;width: 70px; height: 70px;">

현재 효과는 div2를 눌렀을 때 이벤트를 실행하고,div1을 눌렀을 때 링크를 돌리는 것입니다
이렇게 하면 두 가지 방안이 있을 수 있어요.
첫 번째: 기본 이벤트 즉 a 탭의 이동을 막습니다

$('#div2').click(function(e) {
    
    alert('div2');
    event.preventDefault();  
})

두 번째:return

$('#div2').click(function(e) {
    
    alert('div2');
    return false;
})

 
전문 프런트엔드 지식 추가
【원숭이2048】www.mk2048.com