Question 275858 in Html Question posted in
Some basic documentation can be found here.

onKeyDown on nested HTML elements

I have a li element which consists of a button inside one of its div. onKeydown event triggers the parent li element and not the button. I believe the reason is li also has a onKeyDown attribute. Below is a code snippet of the same. How do I manage/separate out the two onKeyDown events?

<li
   id ='test'
   onKeyDown={handleLiClick}
>
  <div>Some Random stuff</div>
  <div> 
     <button
       onClick={handleButtonClick}>
      >
      <SomeComponent>
      </button>
  </div>
</li>

Please note handleButtonClick function listens to both Mouse and keyboard event.

Tags:

2

Answers


  1. 0

    Have you tried something like event.stopPropagation() in your handleLiClick method?

    Login or Signup to reply.
  2. 0

    you can try this， If it helps, please give me a good
    The stopPropagation() method prevents the event from further bubbling, ensuring that the event is only processed on the current target and not propagated to higher-level elements.

    function handleLiClick(event) {
  event.stopPropagation(); 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search