zoukankan      html  css  js  c++  java
  • js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault:

    preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的。

    我们都知道,链接<a>的默认动作就是跳转到指定页面,下面就以它为例,阻止它的跳转:

    //假定有链接
    <a href="http://www.cnf2e.com/" id="testA" >cnf2e</a>
    var a = document.getElementById("testA");
    a.onclick =function(event){
    //阻止默认行为 event.preventDefault(); }

    stopPropagation:

    stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。什么是冒泡事件?如 在一个按钮是绑定一个”click”事件,那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。如:

    <div id='div'  onclick='alert("div");'>
    
       <ul  onclick='alert("ul");'>
    
          <li onclick='alert("li");'>test</li>
    
       </ul>
    
    </div>

    上面的代码,我们单击test时,会依次触发alert(“li”),alert(“ul”),alert(“div”),这就是事件冒泡。

    当我们需要阻止冒泡时,就得使用stopPropagation了

    <div id='div'  onclick='alert("div");' >
    
       <ul  onclick='alert("ul");'>
    
          <li id='ul-a' onclick='alert("li");event.stopPropagation()'>a</li>
    
       </ul>
    
    </div>

    这时单击”test”,只会提示alert(‘li’);

    return false:

    现在很多js代码都直接使用jQuery来写,在jQuery中使用return false时,相当于同时使用event.preventDefault和event.stopPropagation,它会阻止冒泡也会阻止默认行为但是使用原生js写时,return false只会阻止默认行为。下面两段代码说明

    使用原生js方法时,return false只能阻止默认行为,但却不能阻止冒泡

    <div id='div'  onclick='alert("div");'>
    
        <ul  onclick='alert("ul");'>
    
            <li id='ul-a' onclick='alert("li");'><a href="http://www.cnf2e.com" id="testB">cnf2e.com</a></li>
    
        </ul>
    
    </div>
    
    var a = document.getElementById("testB");
    
    a.onclick = function(){
    
     return false;
    
    };

    使用jQuery方法时,return false会阻止默认行为,也会阻止冒泡

    <div id='div'  onclick='alert("div");'>
    
    <ul  onclick='alert("ul");'>
    
    <li id='ul-a' onclick='alert("li");'><a href="http://www.cnf2e.com" id="testC">cnf2e.com</a></li>
    
    </ul>
    
    </div>
    
    $("#testC").on('click',function(){
    
     return false;
    
    });

    原文链接:http://www.cnblogs.com/w158357686/p/4380472.html

  • 相关阅读:
    Qt计算器开发(三):执行效果及项目总结
    [HNOI2019]校园旅行
    How to fix nuget Unrecognized license type MIT when pack
    How to fix nuget Unrecognized license type MIT when pack
    git 通过 SublimeMerge 处理冲突
    git 通过 SublimeMerge 处理冲突
    git 上传当前分支
    git 上传当前分支
    gif 格式
    gif 格式
  • 原文地址:https://www.cnblogs.com/yuqingfamily/p/5940369.html
Copyright © 2011-2022 走看看