공부/React
React : 상위 요소 클릭 안되게 하는 법
딸기버블티
2022. 11. 27. 22:33
Blog.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
function Blog() {
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<h4 onClick={() => { console.log('h4클릭') }}> 제목
<span onClick={() => { console.log('span클릭') }}> 😆 </span>
</h4>
</div>
);
}
export default Blog;
|
cs |
이런 식으로 h4 태그, span 태그 두개에 이벤트를 걸어 놓았다면, 아래와 같이 span 태그 안에 있는 내용 클릭 시 h4 클릭 이벤트도 함께 발생하게 된다. (이걸 이벤트 버블링이라 한다.)
# span 에만 이벤트가 발생하게 하고 싶을 땐?
|
1
|
<span onClick={(e) => { e.stopPropagation(); console.log('span클릭') }}> 😆 </span>
|
cs |
span 태그에 (e) 를 넣어주고 e.stopPropagation(); 을 넣어주면 된다!!
▲ 결과!!