event、event.target、event.preventDefault兼容IE8

event对象

chromefirefox等浏览器中,event对象可从事件函数的参数中传入。ie8中须从window对象中获取。   

$("#btn").click(function(e) { 
    var event = e | window.event; 
})

target

e.target用于获取当前元素,和this差不多。但是在ie8中,不支持e.target。可以用以下方法来解决。

$("#btn").click(function(e) { 
    var event = e | window.event; 
    var target= event .target || event .srcElement; //获取document 对象的引用 
})

preventDefault

  • e.preventDefault的作用是阻止默认行为,常用于a标记等有默认行为的元素。比如a标签点击时默认跳转链接,就可以用e.preventDefault进行阻止。

  • a标签的默认跳转行为还可以用下面这种方式来阻止 

  • <a href="javascript:void(0)">跳转到首页</a>

    项目中还遇到了一个想了好久才想明白的兼容性问题,button按钮 
    给button按钮添加点击事件后,点击后弹出弹框,但是按回车后还可以继续弹出弹框。这是因为,当焦点在input或button等表单元素上时,浏览器默认按下回车时触发按钮的点击事件,这时就可以用通用的方法来阻止默认行为了
     

    $("button").click(function(e) { 
        var event = e | window.event; 
        if(e.preventDefault) { 
            event.preventDefault(); 
        }else{ 
            event.returnValue = false; 
        } 
    });
    

     

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对// main.js function register(event) { event.preventDefault(); const username = event.target.username.value; const password = event.target.password.value; const users = JSON.parse(localStorage.getItem('users') || '[]'); users.push({ username, password }); localStorage.setItem('users', JSON.stringify(users)); alert('注册成功!'); // 注册成功后跳转到登录页面 window.location.href = "login.html"; event.target.reset(); } function login(event) { event.preventDefault(); const username = event.target.username.value; const password = event.target.password.value; const users = JSON.parse(localStorage.getItem('users') || '[]'); const user = users.find(u => u.username === username && u.password === password); if (user) { alert('登陆成功!'); event.target.reset(); // Redirect to change_password.html location.href = 'change_password.html'; } else { alert('无效的用户名或密码.'); } } function changePassword(event) { event.preventDefault(); const username = event.target.username.value; const oldPassword = event.target.oldPassword.value; const newPassword = event.target.newPassword.value; const users = JSON.parse(localStorage.getItem('users') || '[]'); const userIndex = users.findIndex(u => u.username === username && u.password === oldPassword); if (userIndex >= 0) { users[userIndex].password = newPassword; localStorage.setItem('users', JSON.stringify(users)); alert('密码更改成功!'); event.target.reset(); // Redirect to .html location.href = 'login2.html'; } else { alert('无效的用户名或密码.'); } } function login2(event) { event.preventDefault(); const username = event.target.username.value; const password = event.target.password.value; const users = JSON.parse(localStorage.getItem('users') || '[]'); const user = users.find(u => u.username === username && u.password === password); if (user) { alert('登陆成功!'); event.target.reset(); location.href = 'test.html'; } else { alert('无效的用户名或密码.'); } }这段js代码每段进行解析
06-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值