阻止事件冒泡,阻止默認事件
阿新 • • 發佈:2018-04-20
opp eight inter class AD 也會 rap str -m
今天來看看前端的冒泡和事件默認事件如何處理
1.event.stopPropagation()方法
這是阻止事件的冒泡方法,不讓事件向documen上蔓延,但是默認事件任然會執行,當你掉用這個方法的時候,如果點擊一個連接,這個連接仍然會被打開,
2.event.preventDefault()方法
這是阻止默認事件的方法,調用此方法是,連接不會被打開,但是會發生冒泡,冒泡會傳遞到上一層的父元素;
3.return false ;
這個方法比較暴力,他會同事阻止事件冒泡也會阻止默認事件;寫上此代碼,連接不會被打開,事件也不會傳遞到上一層的父元素;可以理解為return false就等於同時調用了event.stopPropagation()和event.preventDefault()
做網頁的左側邊欄導航時,發現一個問題,就是當父菜單打開時,圖標變成向下,但是當點擊子菜單時,父菜單點擊事件也會觸發,導致圖標變成向右。為了解決此問題,了解了一下阻止冒泡事件。
代碼如下:
JxdCommon.jxd_menus=function(obj,container,menuArrI) { var $li; var $liUl; var subMenu=[]; var menu=[]; $.each(obj, function(index, data) {if(!obj[index].parent) { //獲取所有的父級菜單 menu.push(obj[index]); }else{ //獲取的子菜單 subMenu.push(obj[index]); } }); $.each(menu, function(index, data) { var $a = $("<a href=‘"+menu[index].url+"‘><i class=‘" + menu[index].icon + "‘></i> <span>" + menu[index].name + "</span><i class=‘fa fa-angle-right pull-right fa-lg menu-right‘></i></a>");//var $a = $("<a href=‘"+menu[index].url+"‘><i class=‘" + menu[index].icon + "‘></i> <span>" + menu[index].name + "</span><i class=‘fa fa-angle-right pull-right fa-lg menu-right‘></i></a>"); /*$li = $("<li class=‘treeview menuicon-closed‘></li>");*/ $li = $("<li class=‘treeview‘></li>"); $liUl = $("<ul class=‘treeview-menu‘ id=‘"+menu[index].id+"‘></ul>"); $li.append($a); $li.append($liUl); container.append($li); }) $.each(subMenu, function(index, data) { //遍歷dom元素 獲取span //var container=$(".sidebar-menu"); var $ul=$(".sidebar-menu li ul#" + subMenu[index].parent.id+ ""); /*var $liUlLiA = $("<a href=‘" + subMenu[index].url + "‘><i class=‘" + subMenu[index].icon + "‘></i><span>" + subMenu[index].name + "</span></a>");*/ var $liUlLiA = $("<a href=‘" + subMenu[index].url + "‘><i class=‘fa fa-gg‘></i><span>" + subMenu[index].name + "</span></a>"); var $liUlLi = $("<li></li>"); $liUlLi.append($liUlLiA); $ul.append($liUlLi); }) }
function getLoad() { $(".sidebar-menu li").on("click", function () { $("#alertmod_table_list").remove(); // $("#control-sidebar-theme-demo-options-tab").remove(); if ($(this).find("ul li").length == 0) { $(".menu-open").find("li").removeClass(‘active‘); /*$(".menu-open").find("li").removeClass(‘active_bg‘);*/ $(".sidebar-menu").find("li").removeClass(‘active_bg‘); $(this).addClass("active"); /*選中時改變背景顏色*/ $(this).addClass(‘active_bg‘); var url = $(this).find("a").attr("href"); if (url != "#" && url.length > 1) { clearIntervals(); $(".content-wrapper").load(url); //阻止冒泡 return false;
//或者下面兩句等同於return false
/*event.stopPropagation();
event.preventDefault();*/
} } /* 左側導航折疊按鈕改變*/ else { $(this).siblings().children("a").find("i.menu-right").removeClass(‘fa-angle-down‘); $(this).siblings().children("a"
).find("i.menu-right").addClass(‘fa-angle-right‘); if ($(this).children("ul").hasClass("menu-open")) { $(this).children("a").children().last().removeClass("fa-angle-down"); $(this).children("a").children().last().addClass("fa-angle-right"); } else { $(this).children("a").children().last().removeClass("fa-angle-right"); $(this).children("a").children().last().addClass("fa-angle-down"); } } //$(".sidebar-menu li").css("background-color","#D3D3D3"); }); }
4.我們來看看幾組demo,使用jquery進行DOM操作
這是html代碼,div裏面套了一個a標簽,連接到百度
[html] view plain copy
- <div class="box1">
- <a href="http://www.baidu.com" target="_blank"></a>
- </div>
css代碼,a標簽占父元素的空間的1/4,背景顏色為紅色;
[html] view plain copy
- .box1{
- height: 200px;
- width: 600px;
- margin: 0 auto;
- }
- .box1 a{
- display: block;
- height: 50%;
- width: 50%;
- background:red;
- }
下面來看js代碼,第一種
[html] view plain copy
- //不阻止事件冒泡和默認事件
- $(".box1").click(function(){
- console.log("1")//不阻止事件冒泡會打印1,頁面跳轉;
- });
第二種
[html] view plain copy
- //阻止冒泡
- $(".box1 a").click(function(event){
- event.stopPropagation();//不會打印1,但是頁面會跳轉;
- });
- $(".box1").click(function(){
- console.log("1")
- });
第三種
[html] view plain copy
- $(".box1 a").click(function(event){
- //阻止默認事件
- event.preventDefault();//頁面不會跳轉,但是會打印出1,
- });
- $(".box1").click(function(){
- console.log("1");
- });
第四種
[html] view plain copy
- $(".box1").click(function(){
- console.log("1")
- });
- //阻止冒泡
- $(".box1 a").click(function(event){
- event.stopPropagation();
- //阻止默認事件
- event.preventDefault() //頁面不會跳轉,也不會打印出1
- })
第五種
[html] view plain copy
- $(".box1").click(function(){
- console.log("1")
- });
- $(".box1 a").click(function(event){
- return false; //頁面不會跳轉,也不會打印出1,等於同時調用了event.stopPropagation()和event.preventDefault()
- });
阻止事件冒泡,阻止默認事件