事件有属性，还有方法，还有事件。事件本身是个对象^_^

事件的preventDefault()方法改变默认行为，在事件发生前阻止，不让其发生。这样的应用场景有很多，常见表单验证，如必填字段不能为空。

示例1，阻止链接

<body>

<p>DOM使用preventDefault()方法，IE5~IE8使用returnValue</p>

<p><a href="http://www.baidu.com/">去百度</a></p>

<p><a href="http://www.baidu.com" id="gotobaidu">去百度，将被阻止</a></p>

<script>

    var gotobaidu=document.getElementById("gotobaidu");

    gotobaidu.addEventListener('click',stop,false);

    function stop(e) {

        if(e.preventDefault){

            e.preventDefault();

        }else{

            window.event.returnValue=false;

        }

    }

</script>

</body>

　示例2，阻止表单提交

<body>

<p>DOM使用preventDefault()方法，IE5~IE8使用returnValue</p>

<form id="myform" action="http://www.baidu.com/" method="get">

用户名：<input type="text" id="username" name="username">

    <button type="submit">提交</button>

</form>

<script>

    var myform = document.getElementById('myform');

    myform.addEventListener('submit', stop, false);

    function stop(e) {

        var username = document.getElementById('username');

        // alert(username.value);

        if (username.value === '') {

            //要求输入内容

            alert("请输入用户名");

            // 阻止

            if (e.preventDefault) {

                e.preventDefault();

            } else {

                window.event.returnValue = false;

            }

        }

    }

</script>

</body>

　　

 

使用事件的preventDefault()方法改变默认行为的更多相关文章

  1. 事件的preventDefault方法

    事件有一个preventDefault()方法,该方法可以用来取消事件的默认行为.许多事件都有默认执行的关联行为.例如,如果用户在文本字段中键入一个字符,则默认行为就是在文本字段中显示该字符.由于可以 ...

  2. preventDefault()方法

    必须在dragend和dragover事件内调用“事件对象.preventDefault()”方法.因为在默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须把默认处理给关掉.目前 ...

  3. preventDefault() 方法 取消掉与事件关联的默认动作

    前几天写的 响应键盘的图片切换 中, 键盘总是让浏览器滚动,为了取消掉默认的事件,使用了 preventDefault() 方法 定义和用法 preventDefault() 方法取消事件的默认动作. ...

  4. 阻止默认事件event.preventDefault();

    阻止浏览器默认事件.什么是默认事件,例如浏览器默认右键菜单.a标签默认连接跳转...,如何阻止呢? Firefox中,event必须作为参数传入.  IE中,event是window对象的属性. ev ...

  5. js 停止事件冒泡 阻止浏览器的默认行为

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...

  6. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  7. js 停止事件冒泡 阻止浏览器的默认行为（阻止a标签跳转 ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...

  8. js 停止事件冒泡 阻止浏览器的默认行为（比如阻止超连接 # ）

      在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...

  9. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

随机推荐

  1. Python新手入门英文词汇笔记（转）

    一.交互式环境与print输出 1.print:打印/输出2.coding:编码3.syntax:语法4.error:错误5.invalid:无效6.identifier:名称/标识符7.charac ...

  2. Swift学习笔记6

    1.用类型检查操作符(is)来检查一个实例是否属于特定子类型.若实例属于那个子类型,类型检查操作符返回 true,否则返回 false. 2.某类型的一个常量或变量可能在幕后实际上属于一个子类.当确定 ...

  3. javascript 体验定时器

    <script> // setInterval():循环定时器,循环执行 // setTimeout():炸弹定时器,只执行一次 //定义方法1:匿名函数 setInterval(func ...

  4. .NET Framework自带的文件内存映射类

    最近一直为文件内存映射发愁,整个两周一直折腾这个东西.在64位系统和32位系统还要针对内存的高低位进行计算.好麻烦..还是没搞定 偶然从MSDN上发现.NET 4.0把内存文件映射加到了.NET类库中 ...

  5. Study 4 —— 数据类型（1）

    基本类型数字字符串布尔 数字 整数 int    在32位机器上,整数的位数为32位,取值范围为-2**31~2**30    在64位机器上,整数的位数为64位,取值范围为-2**63~2**62 ...

  6. Codeforces 590D Top Secret Task

    D. Top Secret Task time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  7. JAVA NIO 中的 zerocopy 技术提高IO性能

    关于一篇更详细更好的介绍 ZeroCopy技术的文章,可参考:JAVA IO 以及 NIO 理解 这篇文章介绍了 zerocopy技术来提高Linux平台上的IO密集型的JAVA应用程序的性能. ze ...

  8. SpringBoot拦截器的注册

    (1).编写拦截器 package cn.coreqi.config; import org.springframework.util.StringUtils; import org.springfr ...

  9. 【转】Shell编程进阶篇(完结)

    [转]Shell编程进阶篇(完结) 1.1 for循环语句 在计算机科学中,for循环(英语:for loop)是一种编程语言的迭代陈述,能够让程式码反复的执行. 它跟其他的循环,如while循环,最 ...

  10. 【转】Python基础语法

    [转]Python基础语法 学习一门编程语言,通常是学习该语言的以下几个部分的内容: 基础语法:如,变量的声明与调用.基本输出语句.代码块语法.注释等: 数据类型:通常都为 数字.字符串.布尔值.数组 ...