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

事件的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. Linux命令之grep

    grep命令 用处:文本搜索工具 用法:grep + ‘查找关键字的名字’ + 文件名 示例: 还在profile里面查找then 干净利落强大,有关then的信息显示

  2. jedis实现操纵redis的常用api及使用场景

    简单记录一下,和描述一下常用的业务场景.好记性不如烂笔头. pom.xml <!--整合redis--> <dependency> <groupId>redis.c ...

  3. Linux 命令详解（十）Shell脚本的数组详解

    1.数组定义 [root@bastion-IDC ~]# a=( ) [root@bastion-IDC ~]# echo $a 一对括号表示是数组,数组元素用“空格”符号分割开. 2.数组读取与赋值 ...

  4. Java Web之路（五）JSP

    一.jsp的3个指令 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: p ...

  5. C++：error 1189(转)

    在VS 2013中编译程序时出现错误: 错误提示1: error C1189: #error : Building MFC application with /MD[d] (CRT dll versi ...

  6. Linux - 系统资源

    查看剩余内存 free -m #-/+ buffers/cache: #6458M为真实使用内存 1649M为真实剩余内存(剩余内存+缓存+缓冲器) #linux会利用所有的剩余内存作为缓存,所以要保 ...

  7. geeksforgeeks-Array-Rotate and delete

    As usual Babul is again back with his problem and now with numbers. He thought of an array of number ...

  8. 2017-2018-2 20155303『网络对抗技术』Final：Web渗透获取WebShell权限

    2017-2018-2 『网络对抗技术』Final:Web渗透获取WebShell权限 --------CONTENTS-------- 一.Webshell原理 1.什么是WebShell 2.We ...

  9. 2017/05/08 java 基础 随笔

    1.null pointer exception 指针变量obj 没有指向任何空间 你调用它的方法和属性就会出错 2.基本数据类型值传递,不改变原值,调用后就会弹栈,局部变量随时消失 引用数据类型值传 ...

  10. AutoMapper中用户自定义转换

    Custom Type Converters Sometimes, you need to take complete control over the conversion of one type ...