获取触发父元素事件的子元素

当我们做点击页面其他地方，某些同类元素隐藏功能时，有时这类元素中的某个我们需要不隐藏。

这时，就需要用到事件冒泡概念。

知识铺垫：典型的点击其他地方隐藏

 //*** 给原有的点击事件  加上  event.stopPropagation(); 防止事件冒泡
$(document).bind('click', function () {
      $("body").find('.need-hide-div').hide();
});

案例 

例如该功能：

鼠标经过显示修改按钮，点击修改按钮，该项可编辑其他项隐藏不可编辑，

但可修改项分为：输入框、下拉，

问题：若按照上面的写法，当点击下拉菜单时，所有项均变得不可编辑包括正要修改的下拉菜单 所以，则需获取触发事件的DOM。

event.target 通过事件对象获取点击事件的目标元素。通过target属性，来区分是由哪个子元素触发的事件，并进行相应的逻辑处理。

该属性值为一个DOM，表示触发当前事件的那个DOM元素。

//#Data-customerDataPage 页面最外层ID  
$('#Data-customerDataPage').click(function (e) {

            let ths = $(e.target); //获取触发该事件DOM

            let father = $('#Data-customerDataPage .customerDataInfoDetail .cdi-detail-content>li');
            father.each(function () {
                //当前项 不添加不可编辑属性 跳出本次循环
                if (($(this).find(ths).length > 0 )|| (ths.closest($(this)).length > 0)) return true;
                $(this).find('.editBtn').removeAttr('style');
                let notSelect = $(this).find('input,textarea');

               //.forSelect 为下拉 表单组件最外层类名
                if ($(this).find('.forSelect').length <= 0) {
                    $(this).find('input,textarea').attr('disabled', true);
                }

                if (ths.prev('.forSelect').length <= 0) {
                 $(this).find('.forSelect').addClass('disable').find('.emptySelect').removeAttr('style');
                } 
            });

           
        });

1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);

jquery 获取标签名(tagName)

如果是为了取到tagName后再进行判断，那直接用下面的代码会更方便：

$(element).is('input')

如果是要取到标签用作到别的地方，可以使用一下代码：

$(element)[0].tagName
//或：
$(element).get(0).tagName
//注：获取的为大写的标签名
//或：
event.target.className

 

 event对象详细说明