クリックイベント時、親の要素のみを取得する

クリックイベント時に、子要素をクリックしても親要素のみを取得する方法はありますか？
たとえば
div#parent
|
ー div#child

というDOMがあった場合、child要素をclickしても、parent要素をclickしても、parent要素が取得できるといった様にです。

今、やっている方法としては
parent,childともにクリックイベントを付与し、childをイベントバブリングにし、stopPropagationでparentにイベントを伝播させないという方法を取っています。
ただこれだと、child要素を押した時にparent要素のみを取得できていません。
また、子要素から親を遡る方法だと、孫要素があったりするので他の改善策があればご教授いただきたいです。
よろしくお願いします。

上記のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Document</title>
6	<style type="text/css">
7		#parent{
8			width: 100px;
9			height: 100px;
10			background-color: red;
11		}
12		#child{
13			position:absolute;
14			width: 50px;
15			height:50px;
16			background-color: blue;
17		}
18	</style>
19</head>
20<body>
21	<div id="parent">
22		<div id="child">
23		</div>
24	</div>
25	<script>
26		var $parent = document.getElementById("parent");
27		$parent.addEventListener("click", function(e){
28               //e.targetを常にparentにしたい
29			console.log("parent", e.target);
30		},false);
31          
32         //child要素をクリックしてもparent要素を取得したい
33         //ただこれだと、child要素をクリックしてもparent要素は取得できない
34		var $child = document.getElementById("child");
35		$child.addEventListener("click", function(e){
36			e.stopPropagation();
37		},false);
38	</script>
39</body>
40</html>