即使将event.stopPropagation写在onClick处理程序中，事件也会传播给父对象

Question

在下面的代码中，单击设置后，即使将google.com写入设置的e.stopPropagation处理程序中，页面也会重定向到onClick

    <a className="App" href="http://google.com" onClick={() => alert("parent")}>
      Home
      <div
        href={"http://youtube.com"}
        onClick={e => {
          alert("child");
          e.stopPropagation();
        }}
      >
        Settings
      </div>
    </a>

那是为什么？但是，当我添加e.preventDefault()时，它不重定向到google.com吗？为什么e.stopPropagation不起作用而e.preventDefault起作用。任何人都可以解释。

沙盒链接-https://codesandbox.io/s/l7wx5yzp6m

谢谢。