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;

    });

  • 相关阅读:
    Linux知识(7)----远程登录 和远程拷贝
    ROS知识(9)----安装Turtlebot2和远程控制Turtlebot2
    几张图理解Roll, Pitch, Yaw的含义
    GIT(1)----更新代码和上传代码操作的步骤
    ROS知识(8)----CMakeLists.txt文件编写的理解
    ROS知识(7)----ROS命令中的单引号`和‘的混淆问题
    ROS知识(6)----卸载ROS系统
    python知识(2)----python的多态
    DWR3.0框架入门(3) —— ScriptSession的维护及优化
    log4j.properties配置详解
  • 原文地址:https://www.cnblogs.com/w158357686/p/4380472.html
Copyright © 2011-2022 走看看