JavaScript阻止默认事件

最新推荐文章于 2024-06-24 15:18:03 发布

Gyhm

最新推荐文章于 2024-06-24 15:18:03 发布

阅读量4k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_47306019/article/details/127894311

版权

阻止默认事件：

标准浏览器：事件对象.preventDefault();

低版本IE浏览器：事件对象.returnValue= false;

常见默认事件：

a标签跳转页面

若a标签在html中href写有URL默认的跳转地址

则在js中添加a的点击事件，并用event.preventDefault();阻止默认事件发生

实际项目中 a标签在html中写<a href:JavaScript:;> 让a标签执行js程序，

然后在js中用window.location.href='地址'实现页面跳转

form标签点击提交页面

方法一：给button提交按钮添加点击事件

阻止的是这一个button的提交效果，不对其他button产生影响

方法二：给form标签添加阻止默认事件

form中所有的提交都会被阻止

  <style> 
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 600px;
            margin: 150px auto;

            position: relative;
        }

        .box p {
            position: absolute;
            left: 0 ;
            top: -22px;
            display: none;
        }
    </style>
<body>
    <div class="box">

        <form action="./01_复习.html">
            <!-- 最多输入多少个字符 超出设定范围不能再输入 -->
            账号 <input name="userName" type="text" maxlength="14"><span name="nameSpan"></span><br>
            密码 <input name="userPwd" type="password"><br>

            留言 <span name="textareaSpan"> 0 / 200 </span><br>
            <textarea name="" id="" cols="30" rows="10" maxlength="200"></textarea><br>

            <button>提交</button>    
            
            <p>请您输入 7-14 位账号</p>            
        </form>

    </div>

    <script>
        // 获取标签对象
        var oIptName = document.querySelector('[name="userName"]');
        var oIptPwd = document.querySelector('[name="userPwd"]');

        var oP = document.querySelector('p');

        var oNameSpan = document.querySelector('[name="nameSpan"]');

        var oTea = document.querySelector('textarea');
        var oTextareaSpan = document.querySelector('[name="textareaSpan"]');

        var oForm = document.querySelector('form');


        // 给 账号input 添加事件

        // 获取焦点事件
        oIptName.addEventListener( 'focus' , function(){
            // 让 提示信息 p 标签 显示
            oP.style.display = 'block' ;
        })


        // 失去焦点事件
        oIptName.addEventListener( 'blur' , function(){
            // 让 提示信息 p 标签 隐藏
            oP.style.display = 'none' ;
        })

        // change事件
        oIptName.addEventListener( 'change' , function(){
            // 如果 失去焦点时 输入的账号数据 改变了 要 进行账号内容的验证
            // 目前简单验证 账号长度 在 7-14 位 之间
            
            // 获取 账号input中 输入的数据
            var name =  oIptName.value ;
            
            // 判断 字符串长度 在 7-14 之间 
            if( name.length < 7  ){
                // 向 name 之后的 span标签 写入内容
                oNameSpan.innerHTML = `<span style="color:red">您至少需要输入7位 您现在只输入 ${name.length}位 字符 还需要 输入 ${ 7 - name.length} 位字符 </span>`;
            
            }else if( name.length >= 7 && name.length <= 14 ){
                // 向 name 之后的 span标签 写入内容
                oNameSpan.innerHTML = `<span style="color:blue">您现在输入的数据符合规范</span>`;

            }
        })


        // 输入事件
        oTea.addEventListener( 'input' , function(){
            // 给 文本域 添加 输入事件 
            // 每次输入 获取 文本域中的数据内容
            var str = oTea.value;

            // 将 输入的字符个数 写入 span提示标签中
            oTextareaSpan.innerHTML = `${str.length} / 200`;
        })


        // 提交事件
        oForm.addEventListener( 'submit' , function( event ){
            // submit 提交事件 是 给 form标签 绑定的事件 
            // 一般都需要 先 阻止默认事件

            event.preventDefault();

            // 可以获取数据 进行 数据验证判断 

            // 验证 账号的长度 在 7-14 位之间 

            if( !( oIptName.value.length >= 7 &&  oIptName.value.length <= 14) ){
                // 弹出报错信息 
                window.alert('您输入的账号不符合规范');

                // 通过 reutrn 终止之后程序的执行
                return
            }

            // 验证通过 触发 数据交互的操作

        })

    </script>

鼠标右击菜单栏

contextmenu

一般是给整个文档 document添加阻止默认事件的执行

<body>
    <form>
        <ul>
            <li>1 1 1</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>1 1 1</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
    </form>
    <script>
      
        var oform=document.querySelector('form');

        document.addEventListener('contextmenu',function(e) {
            e.preventDefault();
            oform.style.display="block";
            oform.style.top=e.clientY+'px';
            oform.style.left=e.clientX+'px';
        })
        document.addEventListener('click',function() {
            oform.style.display="none";
        })
  </script>

Gyhm

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript阻止默认事件

阻止默认事件：标准浏览器：事件对象.preventDefault(); 低版本IE浏览器：事件对象.returnValue= false;常见默认事件：若a标签在html中href写有URL默认的跳转地址则在js中添加a的点击事件，并用event.preventDefault();阻止默认事件发生实际项目中 a标签在html中写让a标签执行js程序，然后在js中用
复制链接

扫一扫