点击鼠标时，获得具体的html元素？

Question

当鼠标在某个html元素上点击的时候，console.log中显示这个html元素

<p>content in p</p>
<input>content in input</input>
<textarea>
content in textarea
</textarea>
<script charset="utf-8" type="text/javascript">
function handler(event) {
    var x = document.activeElement.tagName;
    console.log(x);
    }
document.addEventListener('click', handler);
</script>

这段代码快达到目标了
鼠标点在 content in input ， console中显示 input;
鼠标点在 content in textarea ， console中显示 textarea;
鼠标点在 content in p ， console中显示 body,可否让它显示p这个html元素？

Answer 1

应该是冒泡或者事件捕获的原因用stopPropagation去除一下

Answer 2

试试这个

function handler(event) {
  console.log(event.target.tagName)
    }
document.addEventListener('click', handler)