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

     

  • 相关阅读:
    jquery 获取select框选中的值示例一则
    jsp的三种自定义标签 写法示例
    通过 SQL Server 视图访问另一个数据库服务器表的方法
    [转]SQLServer跨服务器访问数据库(openrowset/opendatasource/openquery)
    JS 禁用和重新启用a标签的点击事件
    JS原生父子页面操作
    为什么我们有时不用配置java环境变量?
    Android -- ViewPager多页面滑动切换以及动画效果
    Android -- 程序启动画面 Splash
    apache 伪静态 .htaccess
  • 原文地址:https://www.cnblogs.com/111wdh/p/12849556.html
Copyright © 2011-2022 走看看