Search code examples
javascripthtmlreactjsgetuikit

div with click and an anchor tag in it runs both clicks instead of running only the anchor on click


I have a div with in it, both have different on click functions. the also toggles a modal with uikit. When clicking on the element both on clicks are running and the modal opens. Why? How to prevent the click from running the onclick?

<div onClick=()=>onClickDivFunc>
    <a uk-toggle={`target:#${modalId}`} onClick=()=>onClickAnchorFunc>text</a>
</div>

Solution

  • You can achieve this using event.stopPropagation

    Link

    CodePen