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

     

  • 相关阅读:
    flex布局语法
    sqlserver判断text字段是否有数据
    z-index设置后导致遮罩层显示跳动问题
    C# UpdatePanel加载完毕回调JS
    json日期字符串格式化时间
    钉钉考勤机开发需要注意的一个坑
    python bs4 + requests4 简单爬虫
    温故而知新: 关于 js Form 方式提交的一些新认知
    window 环境 Composer 安装 thinkphp5
    百度地图 绘制东莞东城地图示例
  • 原文地址:https://www.cnblogs.com/111wdh/p/12849556.html
Copyright © 2011-2022 走看看