什么是事件的默认行为
事件的默认行为就比如 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.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();
}