Can I have a non-clickable section of a link? - html

Question

Hopefully simple enough, in the below example I want the blue section of the link to be clickable (as a link) but the red section not to be. I am planning to subscribe to the red section's onclick event after with Javascript.
Spent an hour on this and getting nowhere! Does anybody know how to do this?
.outer{
width:300px;
height:50px;
background-color:blue;
position:relative;
display:block;
color:white;
z-index:1;
}
.inner{
width:150px;
height:25px;
background-color:red;
top:0;
right:0;
position:absolute;
pointer-events:none;
z-index:2;
}
<a href="http://google.co.uk" class="outer">
Clickable
<div class="inner">
Not clickable
</div>
</a>
I thought the inner div having a higher z-index and no pointer events would do it, but doesn't seem to work.
Anybody have any ideas?

Answer 1

Instead of hacking the html like that, which is a very bad practice. Why not:
.outer {
background-color: red;
display: inline-block;
}
.inner {
background-color: blue;
width: 300px;
display: inline-block;
}
span {
display: inline-block;
}
<div class="inner">
Clickable
<span>Not clickable</span>
</div>

Answer 2

use preventDefault method.
$('.inner').click(function(e){
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a href="http://google.co.uk" class="outer">
Clickable
<div class="inner">
Not clickable
</div>
</a>