阻止默認事件,滾輪事件與滾動事件

一、阻止默認事件:
1.默認事件:瀏覽器頁面有很多行為:左擊,右擊,雙擊,滾輪事件。這些都是瀏覽器的默認自帶的事件
2.阻止默認事件:要來對這個事件進行破壞
e.preventDefault(); 阻止默認事件
e.returnValue = false; 兼容低版本IE
return false; 可以阻止默認事件(注意:只能阻止DOM零級而不能阻止DOM二級)

//DOM零級寫法:
document.oncontextmenu = function(e){
  e = e || window.event;
  console.log("已經(jīng)觸發(fā)右擊事件!");
  e.preventDefault();
  //e.returnValue = false;
}
//DOM二級寫法:
document.addEventListener("contextmenu", function(e){
  e = e || window.event;
  console.log("已經(jīng)觸發(fā)右擊事件!");
  e.preventDefault();
  //e.returnValue = false;
});
//return false 阻止默認事件,DOM二級不支持return false
document.oncontextmenu = function(){
  console.log("已經(jīng)觸發(fā)右擊事件!");
  return false;
}

二、滾輪事件與滾動事件
1.滾動事件:window.onscroll:監(jiān)聽到的是瀏覽器的滾動條

window.onscroll = function(){
  console.log("滾動事件觸發(fā)了!");
}

2.滾輪事件:document.onmousewheel:(火狐瀏覽器的兼容要在DOM二級中寫,DOM零級無法實現(xiàn)!)

document.onmousewheel = function(){
  console.log("滾輪事件觸發(fā)了!");
  return false;
}
//DOMMouseScroll火狐瀏覽器兼容寫法
document.addEventListener("DOMMouseScroll", function(e){
  e.preventDefault();
  console.log("火狐瀏覽器的滾輪事件");
});

三、滾輪方向
主流瀏覽器滾動值:
1.值都為120的倍數(shù)
2.向下滾:值為負數(shù)
向上滾:值為正數(shù)
火狐瀏覽器滾動值:
1.值都為3的倍數(shù)
2.向下滾:值為正數(shù)
向上滾:值為負數(shù)

document.onmousewheel = function(e){
  console.log(e.wheelDelta);
}
document.addEventListener("DOMMouseScroll", function(e){
  console.log(e.detail);
});
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的。 ??事件,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,684評論 1 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 28,797評論 1 45
  • js之事件機制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驅動...
    道無虛閱讀 2,630評論 0 2
  • 事件是什么,可以用來做什么,什么時候用到它? 事件,就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間。JavaScr...
    茂茂愛吃魚閱讀 1,609評論 0 16
  • 每次過節(jié)之前我和媽媽都會去昆山看望我的外婆。今年大年28,我又和媽媽一起去看望她了。外婆知道我要去,高興的...
    季妞妞閱讀 273評論 0 1

友情鏈接更多精彩內(nèi)容