jQuery如何实现点击时获取HTML元素标签/文本并排除span子元素

我有一个上下文菜单，需要调用指定方法识别p/div元素，当前我先通过打印日志来验证点击时是否选中了正确的元素。

原始HTML代码 #

<div>Hello I'm div</div>

<p>I'm para <span>I'm span inside para</span></p>

初始实现代码 #

var paraElm = $target.closest("p")
if(paraElm){
  console.log("i have selected the element is para",paraElm)
}

实际运行输出 #

• 点击p标签日志：

i have selected the element is para,
n.fn.init [p.locked.sender, prevObject: n.fn.init(1),context: p.locked.sender]
0: p.locked.sender
context: p.locked.sender
length: 1

• 点击p内span标签日志：

i have selected the element is para,
n.fn.init [p.locked.sender, prevObject: n.fn.init(1), context: span.selected]
0: p.locked.sender
context: span.selected
length: 1

需求 #

点击span标签时不应触发日志打印，哪怕该span在p标签内部。

调整后代码（存在兼容问题） #

我增加了条件判断来过滤span标签的点击场景，目前在JSFiddle中运行不符合预期，但实际效果符合我的预期，完整代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Hello I'm div</div>

<p>I'm para <span>I'm span inside para</span></p>

$(document).ready(function() {
  $("body").on('click', function(event) {
    var $target = $(event.target);

    var getElm = $target.closest('p');

    if (getElm.context.nodeName.toLowerCase() != 'span') {
      console.log("I got the element", getElm);
    }
  });
});

你当前的代码依赖jQuery已废弃的context属性，不同jQuery版本对该属性的实现逻辑不同，就会出现部分场景符合预期、部分场景不符合的问题。
正确的实现逻辑是直接判断点击的原始目标节点类型，排除span后再校验父级是否有p元素，代码如下：

$(document).ready(function() {
  $("body").on('click', function(event) {
    // 直接取原生点击目标判断类型
    const targetNode = event.target;
    // 点击的是span直接终止逻辑
    if (targetNode.nodeName.toLowerCase() === 'span') return;
    // 再查找最近的p元素
    const $getElm = $(targetNode).closest('p');
    if ($getElm.length) {
      console.log("I got the element", $getElm);
    }
  });
});

如果后续需要同时兼容div元素的识别，直接修改closest的选择器为p, div即可：

const $getElm = $(targetNode).closest('p, div');

内容的提问来源于stack exchange，提问作者user13424765