Могу ли я получить ссылку без ссылки?

Question

Надеюсь, достаточно просто, в приведенном ниже примере я хочу, чтобы синяя часть ссылки была нажата (как ссылка), но красной секции не было. Я планирую подписаться на событие onclick в красном разделе после Javascript.

Провел час на этом и нигде не попал! Кто-нибудь знает, как это сделать?

.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>

Я думал, внутренний DIV, имеющий более высокую Z-индекс и никаких событий указателя бы это сделать, но не похож на работу.

У кого-нибудь есть идеи?

Answer 1

Вместо взлома HTML подобного, что является очень плохой практикой. Почему нет:

.outer { 
 
    background-color: red; 
 
    display: inline-block; 
 
} 
 

 
.inner { 
 
    background-color: blue; 
 
    width: 300px; 
 
    display: inline-block; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
}

<div class="inner"> 
 
    <a href="http://google.co.uk" class="outer">Clickable</a> 
 
    <span>Not clickable</span> 
 
</div>

Answer 2

использование предотвращениеDefault способ.

$('.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>