JS如何获取点击后当前元素最外层元素？

Question

如：

<div class="box">
//例1
<section class="inner">
     <section>
          <section>
               <p>
                    <span>我是内容</span>
               </p>
          </section>
     </section>
</section>

//...其中若干份类似非固定结构...
//例2
<p>
     <span>
          <em>你好</em>
     </span>
</p>
</div>

点击BOX内，如何获取当前元素最外层元素，如：点击例1任意位置，获取当前位置最外层元素class=inner，点例2任意位置如点到span那里，获取最外层P标签。

请问如何解决？非常感谢！

$(document).on('click',function(){
     //点击任意位置获取最外层元素
})

Answer 1

jq parents
demo

$('.box').on("click", function (e) {
  //点击任意位置获取最外层元素
  $(e.target).parentsUntil('.box').last()
    .css('background-color', 'red');
});

---

Answer 2

dom事件的捕获阶段是按照window -> document -> dom1 -> dom2 -> ...这样一直到目标元素的，冒泡阶段是反过来再走一遍，所以你要寻找外层元素，那么需要定义外层是哪里，否则都找到window去了。

看你的题意，你应该是要找box下的第一级元素吧，那这个就是定义外层的规则，使用jq的可以可以这么写

$(document).on('click',function(e){
    //点击任意位置获取最外层元素
     console.log(e.target)
     // 寻找目标元素的父元素同时是box子元素
     let $inner = $(e.target).closest('.box > *')
     // 用长度判断有没有找到
     if($inner.size()){
         console.log($inner)
     }
})