how to use preventDefault in function onclick inside other onclick

Question

I'm working in this example in react.js

<Card onClick="(e)=>{e.preventDefault(); goPage()}">
  <Card.body>
   <Media>
     <img
         width={64}
         height={64}
         className="mr-3"
         src="https://via.placeholder.com/150"
         alt="Generic placeholder"
     />
     <Media.Body>
        <h5>Media Heading</h5>
        <p>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
          ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
          tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
          Donec lacinia congue felis in faucibus.
        </p>
        <a href="#/" onClick="(e)=>{e.preventDefault(); downloadPage()}">Download Page</a>
      </Media.Body>
    </Media>
  </Card.body
</Card

But I need to both function's onclick work's independently, if I click in link Download Page I want only work it downloadPage() but not run goPage() and vice versa, is it possible?

score 3 · Answer 1 · answered Jul 22 '21 at 18:00

3

You're looking for the event.stopPropagation() method to be applied on the <a> tag: MDN: Event.stopPropagation to prevent event bubbling. If you want to learn more, read about event bubbling and capturing at: What is event bubbling and capturing?

answered Jul 22 '21 at 18:00

83C10

1,112
11
19

score 2 · Accepted Answer · answered Jul 22 '21 at 18:01

You can use stopPropagation here is working sample with html:

   function downloadPage() {
            console.log('downloadPage');
        }
   function goPage() {
            console.log('goPage');
        }

    <div onclick="goPage(); event.stopPropagation();">
        goPage
        <div>
            <a href="#/" onclick="downloadPage(); event.stopPropagation();">Download Page</a>
        </div>
    </div>

score 0 · Answer 3 · answered Jul 22 '21 at 18:01

It looks like you might want to use stopPropagation instead of preventDefault, and this should onlly be necessary on the tag, so it would look something like this:

<Card onClick={(e)=>{goPage()}}>
<a href="#/" onClick={(e)=>{e.preventDefault(); downloadPage()}}>

Notice I replaced the quotes with curly braces as that's the syntax I'm familiar with and found here, it may or may not work for you

how to use preventDefault in function onclick inside other onclick

3 Answers3