Parent div clickable between another div

Question

.black {
  background-color: black;
  width: 500px;
  height: 500px;
}

.red {
  background-color: red;
  width: 200px;
  height: 200px;
}

<a href="#">    
    <div class="black">
        <div class="red"></div>
    </div>
</a>

I'm trying to make the whole div "black" clickable with an hyperlink, but without the div "red" area with any success. I don't know if I should solve it with css or JS, or simply just HTML5

Answer 1

UPDATED

I forgot to wrap the target with jquery object.. sorry

if you want to prevent a child element from triggering an event then can do this via jquery

 $('a').click( function(e) {
  if($(e.target).is('.black')) {
    console.log('whatever..');
    // or do whatever you want
   } else {
    e.preventDefault();
    }
  });

as for the cursor you can do this via css

.red {
cursor: default;
}