如何阻止事件冒泡和預設事件
阿新 • • 發佈:2018-12-30
今天來看看前端的冒泡和事件預設事件如何處理
1.event.stopPropagation()方法
這是阻止事件的冒泡方法,不讓事件向documen上蔓延,但是預設事件任然會執行,當你掉用這個方法的時候,如果點選一個連線,這個連線仍然會被開啟,
2.event.preventDefault()方法
這是阻止預設事件的方法,呼叫此方法是,連線不會被開啟,但是會發生冒泡,冒泡會傳遞到上一層的父元素;
3.return false ;
這個方法比較暴力,他會同事阻止事件冒泡也會阻止預設事件;寫上此程式碼,連線不會被開啟,事件也不會傳遞到上一層的父元素;可以理解為return false就等於同時呼叫了event.stopPropagation()和event.preventDefault()
4.我們來看看幾組demo,使用jquery進行DOM操作
這是html程式碼,div裡面套了一個a標籤,連線到百度
- <divclass="box1">
- <ahref="http://www.baidu.com"target="_blank"></a>
- </div>
- .box1{
- height: 200px;
- width: 600px;
- margin: 0 auto;
- }
- .box1 a{
- display: block;
- height: 50%;
- width: 50%;
- background:red;
- }
下面來看js程式碼,第一種
- //不阻止事件冒泡和預設事件
- $(".box1").click(function(){
- console.log("1")//不阻止事件冒泡會列印1,頁面跳轉;
- });
第二種
- //阻止冒泡
- $(".box1 a").click(function(event){
- event.stopPropagation();//不會列印1,但是頁面會跳轉;
- });
- $(".box1").click(function(){
- console.log("1")
- });
第三種
- $(".box1 a").click(function(event){
- //阻止預設事件
- event.preventDefault();//頁面不會跳轉,但是會打印出1,
- });
- $(".box1").click(function(){
- console.log("1");
- });
第四種
- $(".box1").click(function(){
- console.log("1")
- });
- //阻止冒泡
- $(".box1 a").click(function(event){
- event.stopPropagation();
- //阻止預設事件
- event.preventDefault() //頁面不會跳轉,也不會打印出1
- })
第五種
- $(".box1").click(function(){
- console.log("1")
- });
- $(".box1 a").click(function(event){
- return false; //頁面不會跳轉,也不會打印出1,等於同時呼叫了event.stopPropagation()和event.preventDefault()
- });
一、冒泡事件
我們都知道冒泡就像水底氣泡浮到水面這一過程。冒泡事件即是事件從最底層逐個經過上面一級級事件的過程,就是冒泡事件。那麼如何有效的阻止冒泡事件的發生?其實在非IE瀏覽器中提供了一個事件物件 stopPropagation,那麼在IE瀏覽器中有沒有一個物件去阻止冒泡事件呢,答案是肯定的,通過cancelBubble事件物件可以阻止。
二、預設事件
瀏覽器的預設事件就是瀏覽器自己的行為,比如我們在點選<a href="#">的時候,瀏覽器跳轉到指定頁面。還有,當我們滾動滑鼠時頁面會向下滾動,但我們按空格鍵和按方向鍵時頁面也會向下滾動,為了更好的使用者體驗,這時我們就需要阻止這種行為的發生。
程式碼如下:
[javascript] view plain copy- // 阻止事件冒泡
- function stopBubble(e) {
- if(e && e.stopPropagation){
- e.stopPropagation();
- } else {
- window.event.cancelBubble = true;
- }
- };
- // 阻止瀏覽器的預設事件
- function stopDefault(e){
- if(e && e.preventDefault) {
- e.preventDefault();
- } else {
- window.event.returnValue = false;
- }
- returnfalse;
- };