JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clickedDiv" data-url="http://myurl.com">
  <a class="clickedA">my link</a>
</div>
<br/>

<div class="clickedDiv2" data-url="http://myurl.com">
  <a class="clickedA2">my link</a>
</div>
<br/>
<div class="clickedDiv3" data-url="http://myurl.com">
  <a class="clickedA3">my link</a>
</div>

CSS

.clickedDiv,.clickedDiv2,.clickedDiv3 {
  background: red;
  cursor: pointer;
}

.clickedA,.clickedA2,.clickedA3 {
  cursor: pointer;
  background: yellow;
}

JavaScript

$('.clickedDiv').on('click', 'a', function(e) {
  e.stopPropagation();
});
$('.clickedDiv').click(function(e) {
      alert('ccccc');
    });


  $('.clickedA2').click(function(e) {e.stopPropagation();});
  $('.clickedDiv2').click(function(e) {
   alert('yyyyyy');
  });
  
	$('.clickedDiv3').click(function(e) {

		var target = e.target;
    if (!$(target).is('.clickedA3')) {
	        alert('fffff');
	    }
  });