html - 我可以有一个不可点击的链接部分吗？

Question

希望足够简单，在下面的示例中，我希望链接的蓝色部分可点击(作为链接)，但红色部分不可点击。我打算在使用 Javascript 后订阅红色部分的 onclick 事件。

为此花了一个小时却一无所获!有人知道怎么做吗？

.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-index 并且没有指针事件可以做到这一点，但似乎不起作用。

有人有什么想法吗？

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>