2

事件傳播使用谷歌關閉圖書館防止使用谷歌關閉圖書館

我該如何處理例如divelement的點擊,但防止燒成event handler當用戶點擊該元素的子元素。

例如在下面的代碼我想火event handler當用戶點擊div1但是當他/她點擊「SPAN1」我希望再event handler被兵不血刃的div1處理程序調用。

<div style="width: 400px" id="div1"> 
<span id="span1">click me to reload</span> 
click here to Toggle accordion 
</div> 

UPDATE

JS代碼:

/**** accordion ***/ 
var panels = goog.dom.getElementsByClass('newsColumnHeader', goog.dom.getElement('accordionContainer')); 

var anims = {}; 
var open = null; 

goog.array.forEach(panels, function(pane){ 
    var animation = new goog.ui.AnimatedZippy(pane, goog.dom.getNextElementSibling(pane)); 
    goog.events.listen(animation, goog.ui.Zippy.Events.TOGGLE, zippyToggle); 
    anims[goog.getUid(animation)] = animation; 
}); 

function zippyToggle(event) {  
    var uid = goog.getUid(event.target);     
    // simple logic - only one open panel in one time 
    if (event.expanded && uid != open) { 
    if (open) { 
     anims[open].setExpanded(false); 
    } 
    open = uid; 
    } 
} 
/******************/   

var refreshVarzesh3 = goog.dom.getElement("btnRefreshVarzesh3"); 
if (refreshVarzesh3 != null) { 
    goog.events.listen(refreshVarzesh3, goog.events.EventType.CLICK, function(event) { 
    /*doing something but not toggling accordion pane*/ 
    }); 
} 

HTML代碼:

<body> 
<div class="main"> 
    <div class="top"> 
    <div id="toolbar">   
     <img src="css/img/contact.png" alt="تماس، پیشنهاد، گزارش خطا" title="تماس، پیشنهاد، گزارش خطا"/>   
    </div> 
    <img src="css/img/football_news.gif" alt="آخرین اخبار فوتبال"/> 
    </div> 
    <div class="middle"> 
    <div class="left"></div> 
    <div class="right"> 
     <div class="accordion" id="accordionContainer"> 
     <div class="newsColumnHeader"> 
      <div class="buttons"> 
      <img id="btnRefreshVarzesh3" src="css/img/refresh.png" alt="به روز رسانی" title="به روز رسانی"/>     
      </div> 
      <%=lbls.getString("Varzesh3News")%> 
     </div> 
     <div class="newsList" id="varzesh3NewsContainer"></div> 
     <div class="newsColumnHeader"><%=lbls.getString("PersepolisNews")%></div> 
     <div class="newsList" id="persepolisNewsContainer"></div> 
     <div class="newsColumnHeader"><%=lbls.getString("EsteghlalNews")%></div> 
     <div class="newsList" id="esteghlalNewsContainer"></div> 
     <div class="newsColumnHeader"><%=lbls.getString("NavadNews")%></div> 
     <div class="newsList" id="navadNewsContainer"></div> 
     </div> 
    </div> 
    </div> 
    <div class="bottom"></div> 
</div> 

在該事件處理程序
+1

什麼都沒有? http://stackoverflow.com/search?q=prevent+propagation+javascript – mplungjan

回答

9

純javascript開發人員的答案是here但是如果你用Google Closure Library下面的代碼是en ough:

event.stopPropagation(); 
4

單擊您要使用的preventDefault()

例如:

document.getElementById('div1').onclick = function (event) { 
    //your code 
    event.preventDefault(); 
} 
+0

我需要使用Google Closure類的代碼。 – ehsun7b

+0

我在我的更新中添加頁面代碼。 – ehsun7b

1

僅供參考在谷歌關閉所有事件從goog.events.Event

http://docs.closure-library.googlecode.com/git/class_goog_events_Event.html

衍生例如:goog.events.BrowserEvents

所以第一一個是stopPropagation

this.getHandler().listen(element ,goog.events.EventType.CLICK, function (e){ 
    e.stopPropagation(); 
    }); 

一個是goog.events.Event.stopPropagation是一個靜態方法 這反過來上述方法調用

goog.events.Event.stopPropagation = function(e) { 
    e.stopPropagation(); 
}; 

編輯: 請務必閱讀 - 在這裏Dangers of Event Propagation