How to prevent javascript from running simultaneously?

Question

I have html code like this

<div id="some-div">
    <a href="#" class="link-click">some link text</a>
    <div id="small-text">here is the small text</div>
    //another text block 
</div>

<script type="text/javascript">
  $('#some-div').click(function(){//some task goes here});
  $('.link-click').click(function(){//some task goes here for link});
  $('#small-text').click(function(){//some task goes here for small div});
</script>

when we click on the popup message div (id = some-div), but when I click on the link (class = link-click), I need to run another javascript function. but the thing is, when I click the link to the link, it also runs the some-div function. means that when clicked, both functions start.

how to prevent javascript function from running at the same time. I use jquery too. thank

Answer 1

You can use event.stopPropagation () to avoid an event in the DOM tree.

Answer 2

$('.link-click').click(function(e){
  e.stopPropagation();
});