My event.preventDefault() doesn't stop the href from happening

Question

I have a problem with Javascript, I made an image with areas and I wanted something to happen when one of the area is clicked.

At first, when I clicked, the event happened and the page seemed to "reload" immediatly. After a little research, I tried to add event.preventDefault() because I think the href="" was the problem, and putting href="404" confirmed it. But the event.preventDefault() does not stop the href from happening.

I tried this :

document.getElementsByClassName("D").onclick = function () {myFunction()}; function () {myFunction2()};

function myFunction(){
stopImmediatePropagation() ;
event.preventDefault();
}

function myFunction2() {
$('.a1').addClass('visible');
$('.a1').removeClass('dissimule');

}

and

document.getElementsByClassName("D").onclick = function () {myFunction()};

function myFunction(){
event.preventDefault();
$('.dissimule').addClass('visible');
$('.dissimule').removeClass('dissimule');
}