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

事件的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. powershell 删除8天前的日志

    把以下命令保存为ps1脚本,添加到Windows计划任务中设定每天固定时间执行即可: #delete logs in specify website, just save logs in eight ...

  2. JAVA记录-添加错误页面友好提示

    1.web.xml加入以下配置 <error-page> <error-code>404</error-code> <location>/WEB-INF ...

  3. gitlab与pycharm结合

    一切都在图中 点开pycharm里的菜单选项 设置git代码仓库的地址 修改了代码之后,如何推送到git服务器上 通过pycharm下载代码仓库 pycharm中如何设置分支 pycharm新建了分支 ...

  4. oracle全文检索【转】【补】

    全文检索 oracle对使用几十万以上的数据进行like模糊查询速度极差,包括 like 'AAA%' ,like '%AAA',like '%AAA%',like '%A%A%'的那些模糊查询.网上 ...

  5. FZU - 1989 AntiAC

     Problem 1989 AntiAC Accept: 93    Submit: 444Time Limit: 4000 mSec    Memory Limit : 32768 KB  Prob ...

  6. Java编程思想 学习笔记3

    三.操作符 1.优先级 当一个表达式中存在多个操作符时,操作符的优先级就决定了各部分的计算顺序.程序员常常忘记其他优先级规则,所以应该用括号明确规定计算顺序. 当编译器观察到一个String后面紧跟着 ...

  7. Multi-Anti-Nim游戏结论及证明

    一.定义 Anti-Nim 游戏: 取走最后一个石子的玩家输 Multi-Nim游戏: 每次取完后可以将一堆石子分为多堆,不能存在空堆 Multi-Anti-Nim游戏: 每次取完后可以将一堆石子分为 ...

  8. adb 安装apk到只当设备

    1.adb devices 2,选择指定的设备,如上面的那个 然后:adb -s 292be8597d94 install *apk

  9. Pool多进程示例

    利用Pool类多进程实现批量主机管理 #!/usr/bin/python # -*- coding: UTF-8 -*- # Author: standby # Time: 2017-03-02 # ...

  10. AsciiMorph - 新奇的 ASCII 字符画生成工具&插件

    AsciiMorph 是一个新奇的 ASCII 字符画生成工具和开源插件.字符画(ASCII Art)的历史可以追溯到几十年前,起初是用在图形显示功能受限的设备上,用ASCII字符集里的可打印字符来拼 ...