div에 onClick 걸기 (안쪽 클릭이 안될 경우 - css에 pointer-events: none;)

div에 onClick을 걸었으면, 그 div의 자식 div들에는

pointer-events:none; 을 먹여줘야 전체 클릭이 적용된다.

<div className="부모" onClick={함수아무거나}>
	<div className="첫째자식">
    	솰라솰라
    </div>
    <div clssName="둘째자식">
    	밥주세용
    </div>
</div>

이렇게 div에 onClick을 걸어서 클릭시에 '함수아무거나'를 실행시킬 수 있는데

문제는

안쪽 클릭이 안된다......

가생이만 클릭했을때 함수아무거나에서 e.target.id를 뽑아봐도 암것도 안나온다....

------------------------------------

함수아무거나 = (e) => {

console.log(e.target.id); 

}

------------------------------------

 

그래서 안쪽 div를 제거해봤더니 잘 작동.

아 div영역에 뭔가 문제가 있구나.

css를 찾아보니, pointer-events:none; 을 첫째자식 div와 둘째자식 div에 넣어주니

두 div가 마우스 이벤트 타겟에서 제외된다.