阻止默认事件,滚轮事件与滚动事件

一、阻止默认事件:
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);
});

你可能感兴趣的:(阻止默认事件,滚轮事件与滚动事件)