html - 如何使内部div可点击？

Question

我有下一个 html:

<a href="somelink" class="list-group-item">
    Text
    <div onclick="func()">Content</div>
</a>

但是当我点击我的 div 时，a 也变得均匀。如何预防后续事件？我想如果用户点击了我的 div 那么只有这个 div 会被点击。

已更新
也许这不是一个优雅的解决方案，但我已经解决了我的问题:

<button class="list-group-item" type="button" onlick="link('somelink')">
    Text
    <div onclick="func()">Content</div>
</button>

虽然现在它显示了一个焦点荧光笔并且 outline: none; 没有帮助隐藏它。

Answer 1

使用纯 javascript(使用 event.preventDefault() 来防止链接的默认操作):

<a href = "somelink">
    Text
    <div id="div">Content</div>
</a>
<br/>
<span id="result"></span>
<script>
document.getElementById("div").addEventListener("click", function(event){
event.preventDefault();
//you may also want to use event.stopPropagation() to stop the event bubbling down the DOM tree
myFunc();
});
function myFunc(){
document.getElementById("result").innerHTML = "Function myFunc called.";
}
</script>