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

     

  • 相关阅读:
    F
    E
    网上见到一同行发的隐私政策 备以后用
    Cannot connect to the Docker daemon. Is the docker daemon running on this host?
    mark
    转 随机数问题
    随机不同的数
    转 基于Quick-cocos2dx 2.2.3 的动态更新实现完整篇。(打包,服务器接口,模块自更新
    字符串
    关于cmbiling.jar cocos2dx的问题
  • 原文地址:https://www.cnblogs.com/111wdh/p/12849556.html
Copyright © 2011-2022 走看看