Question

<div id="home">
    <div id="second"></div>
</div>

#home {
  width: 100px;
  height: 100px;
  background-color: red;
}

#second {
  width: 20px;
  height: 20px;
  background-color: green;
}

$(window).click(function(e) {
    if(e.target.id == 'home'){
       alert('This is div home!');
    }

});

现在，如果我点击绿色div然后这不起作用，但这个div是div红色。可以自动添加所有孩子div id home吗？如果这个div有100个孩子，那么我必须添加100个if？

Answer 1

您需要检查目标元素是否在#home div：

中

$(document).click(function(e)
{
    if(e.target.id == 'home' || $(e.target).closest('#home').length)
    {
       alert('This is div home!');
    }
});

这是小提琴：http://jsfiddle.net/6sY49/

Answer 2

e.target将始终是嵌套最深的元素。

如果您需要测试所有祖先，请使用.parentNode循环遍历祖先。

$(window).click(function(e) {
    var el = e.target;
    while(el.id !== 'home') {
        el = el.parentNode;
    }

    if( el ) {
       alert('This is div home!');
    }
});

但似乎你正在尝试进行文档范围的事件委派。 jQuery内置了这种能力。

$(document).on('click','#home',function() {
    alert('This is div home!');
});

或之前 jQuery 1.7 ：

$(document).delegate('#home','click',function() {
    alert('This is div home!');
});

Answer 3

也许您只想使用

$('#home').click(function(e) {
    alert('This is div home');
});

这将使用事件bubling＆amp;效率更高！

儿童在功能e？

3 个答案: