zoukankan      html  css  js  c++  java
  • js节点,阻止事件冒泡

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

     

  • 相关阅读:
    eclipse真机调试显示Target unknown的解决方法
    教你看懂GERBER中的钻孔(.txt)文件
    Quartus ii 12.0 和ModelSim 10.1 SE安装及连接
    Android的学习——ubuntu下android5.1源码的make编译
    ubuntu 14.04 下找不到命令,路径出错
    【转载】VMware虚拟机修改硬盘容量大小
    Fedora10下建立linux系统的窗口没有地址栏
    [转]SecureCRT连接主机时,无法从键盘输入
    在FASTBuild中使用Distribution
    在FASTBuild中使用Caching
  • 原文地址:https://www.cnblogs.com/111wdh/p/12849556.html
Copyright © 2011-2022 走看看