Question

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

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

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

在上面的exp中：如果您点击h3，h4或按钮，它只会在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');
}

但那不起作用..

任何提示？

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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');
        }

      });  
    }
  };
});

如何定位div的子元素？

3 个答案: