事件的默认行为

什么是事件的默认行为

事件的默认行为就比如 a标签点击时会发生自动跳转,form表单点击提交按钮会自动上传数据,以及鼠标右键点击时会自动生成一个菜单,

如何阻止事件的默认行为

(1)将链接地址改为javascript:;
(2)在事件代码的最后加return false
(3)使用事件对象preventDefault()阻止 但是有ie兼容问题

代码示例

(1)将链接地址改为javascript:;
<a href="http://www.baidu.com">百度</a>
<a href="javascript:;">百度</a> //将a链接的地址修改可以阻止默认行为
(2)在事件代码的最后加return false
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
<script>
var a = document.querySelector("a");//获取a链接
a.onclick=function(e){
    console.log("我爱你");
    return false
}
</script>
(3)使用事件对象preventDefault()阻止 但是有ie兼容问题 在ie中使用e.returnValue = flase
//点击鼠标右键生成无序列表
var x,y,arr = ["html","js","css","vue"];
function createUl(){
var ul = document.createElement("ul");
document.body.appendChild(ul);
for(var i = 0;i <4;i++){
    var li = document.createElement("li");
    li.innerText = arr[i];
    li.style.listStyle = "none";
    ul.appendChild(li);
}
ul.setAttribute("style","padding:5px;width:150px;border:1px solid #000;position:fixed;")
ul.style.left = x+"px";
ul.style.top = y+"px";
}
document.oncontextmenu =  function(e){
    var e  = e || window.event;
    x = e.clientX;
    y = e.clientY;
    e.preventDefault();
    document.body.innerHTML = "";
    createUl();
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值