js节点，阻止事件冒泡

Posted 2020-12-15 wangmeihao

parentNode:父级节点

<div id="a1">父<p id="a2">孩子</p></div>

var i=document。getElementById（‘a2’）.parentNode;

console.log(‘i‘);//会查找到a2元素的父节点

 

childNodes:子级节点集

<div id="a1">父<p id="a2">孩子</p></div>

var i=document。getElementById（‘a1’）.childNodes;

console.log(‘i‘);//会查找a1的所有子级节点，回车是一个text节点

 

firstChild:第一个子级节点

var i=document。getElementById（‘a1’）.firstChild;

console.log(‘i‘);

 

lastChild:最后一个子级节点

var i=document。getElementById（‘a1’）.lastChild;

console.log(‘i‘);

 

nextSibling:同级下一个节点

var i=document。getElementById（‘a1’）.nextSibling;

console.log(‘i‘);

 

 

previousSibling:同级上一个节点

var i=document。getElementById（‘a1’）.previousSibling;

console.log(‘i‘);

 

 

阻止事件冒泡

1.e.stopPropagation()；阻止事件分配到其他节点，父级事件不再显示；

<div id=‘d’>点123<p id=‘p’>点我</p></div>

document.getElementById(‘p‘).onclick=function(e){alert(‘1‘);e.stopPropagation（）；};//点击点我时会弹框1，加上e.stopPropagation()；后点点我时只会出现弹框1

document.getElementById(‘d‘).onclick=function(){alert(‘2‘);}；//点击点123时会弹框2

 

2.return false; js只会阻止默认行为，若有跳转页面将会阻止，jq阻止默认又防止冒泡；

<div id="a">点我<p id="q"><a href="01.html">连接</a></p></div>
document.getElementById(‘p‘).onclick=function(e){alert(‘1‘);e.stopPropagation（）；return false；};//点击连接，先出弹框1后跳转01.html页面，加return false；将不再跳转页面

document.getElementById(‘d‘).onclick=function(){alert(‘2‘);}；

 

 

3.event.preventDefault();取消事件的默认动作，若有跳转页面将阻止

 

 

<div id="a">点我<p id="q"><a href="01.html">连接</a></p></div>
document.getElementById(‘p‘).onclick=function(e){alert(‘1‘);e.preventDefault;};//点击连接，先出弹框1后弹出弹框2，e.preventDefault将不再跳转页面

 

document.getElementById(‘d‘).onclick=function(){alert(‘2‘);}；