Anchor child weird behavior

HTML

<a href="" target="_blank" id="anchor">
    Anchor
    <span id="child">
        And a child <strong>will not call</strong> stopPropagation
    </span>
    <span id="child2">
        And a child <strong>will call</strong> stopPropagation
    </span>
</a>


<form id="form">
    <button id="buttonStop">Stop propagation</button>
    <button id="buttonNoStop">Don't stop propagation</button>
</form>

CSS

a {
    padding: 2em;
    background-color: rgba(50,30,180, 0.5);
    color: white;
    text-decoration: none;
    display: inline-block;
}
div,span, form {
    display: block;
    padding: 2em;
    background-color: rgba(180,50,30, 0.5);
    background-color: blue;
}
div + div, span + span, button + button {
    background-color: rgba(90,50,30, 0.5);
        color: white;
}

JavaScript

var child = document.querySelector('#child');
child.addEventListener('click', function(event){
    console.log('child clicked', event.target,event.currentTarget);
});
var child2 = document.querySelector('#child2');
child2.addEventListener('click', function(event){
    console.log('child2 clicked', event.target,event.currentTarget);
    event.stopPropagation();
});
var anchor = document.querySelector('#anchor');
anchor.addEventListener('click', function(event){
    event.preventDefault();
    console.log('anchor clicked bubble', event.target,event.currentTarget);
});
anchor.addEventListener('click', function(event){
    //event.preventDefault();
    console.log('anchor clicked capture', event.target,event.currentTarget);
}, true);


// similar form example
var form = document.querySelector('#form');

form.addEventListener('submit', function(event){
  event.preventDefault();
console.log('form submit', event);
});

form.addEventListener('click', function(event){
  event.preventDefault();
console.log('form click', event);
});

document.querySelector('#buttonStop').addEventListener('click', function(event){
 event.stopPropagation();            
 console.log('buttonStop clicked', event);
});

document.querySelector('#buttonNoStop').addEventListener('click', function(event){          
 console.log('buttonNoStop clicked', event);
});