Templee_0316) e.stopPropagation : Ignore Parent onClick event when Child element is clicked >

What I wanted to do from upper case is,

1) As a Whole, Wanted to go to "new" page by clicking
entire 'Block'

onClick = ( moving route )  // applied to entire component 

so 'Block' is parent of all children components inside

2) Want to apply 'toggle' function if I click the 'checkbox'

( children ) onClick = ( toggleTodo )

But

if I try 2nd job ,
it works, but
1st job applied to entire component also applies !!

What I want is
' Just ' toggle if I click
' CheckBox '

But,
'Toggle'

• 'Move Route'

two functions applies !!

Why >

event liesteners works like a 'bubble'

which means
when there are 2 events applied
1) parent
2) child

if I 'click' the 'child',
1) child event !! pop !
2) parent event !! pop !

bubble popping from child to parent

Solution

So, then, How can I block this bubble,
and only apply 'child' event ??

e.stopPropagation()

Code

<StyledTodoContent
        finished={todo.is_finished ? true : false}
        key={todo.id + todo.teamId}
        onClick={moveToDetailPage}
      >
		<NewCheckDiv
              TodoId={todo.id}
              isFinished={todo.is_finished}
              onClick={(e: React.MouseEvent<HTMLElement>) => {
              toggleTodo(todo);
              e.stopPropagation();
            }}
        />
</StyledTodoContent>

only 'toggleTodo' function
in 'NewCheckDiv' component ( child ) will happen