一、阻止默认事件:
1.默认事件:浏览器页面有很多行为:左击,右击,双击,滚轮事件。这些都是浏览器的默认自带的事件
2.阻止默认事件:要来对这个事件进行破坏
e.preventDefault(); 阻止默认事件
e.returnValue = false; 兼容低版本IE
return false; 可以阻止默认事件(注意:只能阻止DOM零级而不能阻止DOM二级)
//DOM零级写法:
document.oncontextmenu = function(e){
e = e || window.event;
console.log("已经触发右击事件!");
e.preventDefault();
//e.returnValue = false;
}
//DOM二级写法:
document.addEventListener("contextmenu", function(e){
e = e || window.event;
console.log("已经触发右击事件!");
e.preventDefault();
//e.returnValue = false;
});
//return false 阻止默认事件,DOM二级不支持return false
document.oncontextmenu = function(){
console.log("已经触发右击事件!");
return false;
}
二、滚轮事件与滚动事件
1.滚动事件:window.onscroll:监听到的是浏览器的滚动条
window.onscroll = function(){
console.log("滚动事件触发了!");
}
2.滚轮事件:document.onmousewheel:(火狐浏览器的兼容要在DOM二级中写,DOM零级无法实现!)
document.onmousewheel = function(){
console.log("滚轮事件触发了!");
return false;
}
//DOMMouseScroll火狐浏览器兼容写法
document.addEventListener("DOMMouseScroll", function(e){
e.preventDefault();
console.log("火狐浏览器的滚轮事件");
});
三、滚轮方向
主流浏览器滚动值:
1.值都为120的倍数
2.向下滚:值为负数
向上滚:值为正数
火狐浏览器滚动值:
1.值都为3的倍数
2.向下滚:值为正数
向上滚:值为负数
document.onmousewheel = function(e){
console.log(e.wheelDelta);
}
document.addEventListener("DOMMouseScroll", function(e){
console.log(e.detail);
});
网友评论