事件的默认行为

最新推荐文章于 2022-10-01 15:33:48 发布

Nightne

最新推荐文章于 2022-10-01 15:33:48 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44284981/article/details/103619513

js 专栏收录该内容

7 篇文章

订阅专栏

什么是事件的默认行为

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