我们说我有一个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');
}
但那不起作用..
任何提示?
答案 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');
}
});
}
};
});