javaScript阻止默认行为——e.preventDefault 和 e.returnValue = false(</a>标签的默认跳转、鼠标右键默认行为、表单默认自动提交)

  • 在新版本浏览器中,e.preventDefault 和 e.returnValue = false都能够阻止默认行为
  • 在老版本浏览器中,就需要区分IE浏览器和非IE浏览器了。 

          e.preventDefault 用于非IE浏览器;e.returnValue = false用于IE浏览器。

  • e.returnValue = false在IE8及以下版本,可以实现阻止默认行为;在IE8以上版本的IE则没有效果,不能阻止默认行为。
<form action="#">
        账号:<input type="text" name="user">
        <br/>
        <button>登录</button>
    </form>
    <a href="https://www.baidu.com">百度</a>
<script>
//阻止a标签的点击后就默认跳转行为
        //获取a标签对象
        var a1=document.querySelector("a")
        a1.onclick=function(e){
            var e = e || window.event
            //阻止默认行为
             return false
            e.preventDefault()
             e.returnValue=false
            //兼容阻止默认行为
            e.preventDefault?e.preventDefault():e.returnValue=false
        }
//阻止鼠标右键默认行为
         document.oncontextmenu=function(e){
            return false
        } 


//阻止表单的默认提交
        /* 
         注:button标签,如果在form表单中出现时,默认是作为提交按钮使用
        */
        var btn=document.querySelector('form')
        btn.onsubmit=function(e){
            var  e = e || window.event
            return false
        }
    </script>

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<div class="submit "><form action="signup.php" method="POST" class="Form1" id="Form1" onsubmit="return check()"> <span>账号&nbsp:&nbsp</span><input class="input1" type="username" onblur="signupusername()" required eholder="请输入账号名"><p class="text1">账号格式有误</p> <p class="text2"></p> <span>密码&nbsp:&nbsp</span><input> class="input2" type="password" name="signup_passWord"onblur="signuppassword()" required placeholder="请输入密码"><p class="text">密码必须由6-16位数字加字母组成</p> <span>确认&nbsp:&nbsp</span><input class="input3" type="password" name="signup_passWord2" onblur="signuppassword2()" required placeholder="请确认密码"> <p class="text3">前后密码不一致</p> <span>手机&nbsp:&nbsp</span><input class="input4" type="phone" name="signup_phone"onblur="signupphone()" required placeholder="请输入手机"><p class="text4">手机号码格式有误</p> <span>邮箱&nbsp:&nbsp</span><input class="input5" type="email" name="signup_email" onblur="signupemail()" required placeholder="请输入邮箱"><p class="text5">邮箱格式有误</p> <p class="yz"> <span>验证码&nbsp:</span> <input type="text" id="text" class="yz_text" required placeholder="请输入验证码">input type="button" id="code" onclick="Code()" title='点击更换验证码'> </p>input class="sub1" type="submit" value="立即注册"></form> </div>  <div class="submit action"><form action="login.php" method="POST"> <span>账号&nbsp:&nbsp</span><input class="input6" type="username" name="login_userName" requiredplaceholder="请输入手机号"> <span>密码&nbsp:&nbsp</span><input class="input7" type="password" name="login_passWord" required placeholder="请输入密码"><input class="sub2" type="submit" value="立即登录"></form></div></div> </div> </div>根据代码写一个jQuery交互数据,使用到ajax
最新发布
05-29
假设你需要通过AJAX向服务器发送注册请求,并在收到服务器响应后更新页面。你可以按照以下步骤进行操作: 1. 给注册表单添加ID,方便使用jQuery选择器操作DOM: ```html <form action="signup.php" method="POST" class="Form1" id="signup-form" onsubmit="return check()"> <!-- 表单内容 --> </form> ``` 2. 给登录表单添加ID,方便使用jQuery选择器操作DOM: ```html <form action="login.php" method="POST" class="Form2" id="login-form"> <!-- 表单内容 --> </form> ``` 3. 在JavaScript中,使用jQuery选择器获取表单元素和按钮元素,并绑定事件监听器: ```javascript $(function() { // 监听注册表单提交事件 $('#signup-form').submit(function(e) { e.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 var formData = $(this).serialize(); // 发送AJAX请求 $.ajax({ url: 'signup.php', type: 'POST', data: formData, success: function(response) { // 处理服务器响应 alert('注册成功!'); }, error: function(jqXHR, textStatus, errorThrown) { // 处理请求错误 alert('请求失败:' + textStatus + ',错误信息:' + errorThrown); } }); }); // 监听登录表单提交事件 $('#login-form').submit(function(e) { e.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 var formData = $(this).serialize(); // 发送AJAX请求 $.ajax({ url: 'login.php', type: 'POST', data: formData, success: function(response) { // 处理服务器响应 alert('登录成功!'); }, error: function(jqXHR, textStatus, errorThrown) { // 处理请求错误 alert('请求失败:' + textStatus + ',错误信息:' + errorThrown); } }); }); }); ``` 这样,当用户点击注册或登录按钮时,就会发送AJAX请求,并在收到服务器响应后弹出提示框。注意,这里我们使用了`preventDefault()`方法阻止表单默认提交行为,避免页面跳转

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值