如何定位div的子元素?

时间:2015-04-08 13:55:07

标签: javascript angularjs

我们说我有一个div框,它有h3,按钮等子元素。

我想点击div,但也可以点击子元素。我怎么能这样做?我已经尝试了一切,但我无法弄清楚......

Exp:http://plnkr.co/edit/nYGldAZMcOC2SG1bddpq?p=preview

在上面的exp中:如果您点击h3h4或按钮,它只会在div区域内执行某些操作..

我尝试过类似的事情:

scope.targetEl = document.getElementById('myDiv');
scope.childEl = document.getElementById('myDiv').getElementsByTagName( '*');

//and checking
if(e.target === scope.targetEl || e.target === scope.childEl){
   alert('in box');
}

但那不起作用..

任何提示?

3 个答案:

答案 0 :(得分:1)

这是因为您正在检查此行中的目标元素:

if(e.target === scope.targetEl){

每当您单击div中的h元素时,目标元素就会发生变化。我分叉了你的plunkr here,当你点击h元素时,你可以看到警报触发。

答案 1 :(得分:0)

默认情况下,事件将从最深元素冒泡到最高元素。 请查看此页面以获取有关事件冒泡的精彩文章:http://javascript.info/tutorial/bubbling-and-capturing

如果要捕获从最高元素到最深元素的事件,则需要事件捕获。如上面的链接所述,唯一的方法是使用addEventListener方法,将最后一个参数设置为true

答案 2 :(得分:0)

childNodes属性返回节点子节点的集合,作为NodeList对象。 集合中的节点按照它们在源代码中出现的顺序进行排序,并且可以通过索引号进行访问。索引从0开始。更改js文件,如下所示 -

 var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('drctv', function(){
  return{
    template:'<div id="myDiv">' +
    '<h3>txt1</h3>' +
    '<h4>txt1</h4>' +
    '<button>button</button>' +
    '</div>',
    link:function(scope,element){
      element.on('click', function(e){
        scope.targetEl = document.getElementById('myDiv');
        var c = document.getElementById('myDiv').childNodes;
        for (i = 0; i < c.length; i++) {
        if(e.target == c[i]){
          alert('child element');
        }
    }

        if(e.target === scope.targetEl ){
          alert('in box');
        }

      });  
    }
  };
});