Prevent event propagation using Google Closure Library
Using Google Closure Library:
How can I handle clicking of an element for example a div but prev开发者_运维技巧ent firing the event handler when the user clicks the child elements of that element.
For example in the following code I want to fire the event handler when user click div1 but when he/she clicks 'span1' I want another event handler to be called without firing the handler of div1.
<div style="width: 400px" id="div1">
<span id="span1">click me to reload</span>
click here to Toggle accordion
</div>
UPDATE
JS Code:
/**** 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 CODE:
<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>
for pure javascript developers the answer is here but if you use Google Closure Library the following code is enough:
event.stopPropagation();
in the event handler of that click you have to use preventDefault()
for example:
document.getElementById('div1').onclick = function (event) {
//your code
event.preventDefault();
}
Just for Reference All events in Google Closure are derived from goog.events.Event
http://docs.closure-library.googlecode.com/git/class_goog_events_Event.html
For Example : goog.events.BrowserEvents
So first one is stopPropagation
this.getHandler().listen(element ,goog.events.EventType.CLICK, function (e){
e.stopPropagation();
});
Second one is goog.events.Event.stopPropagation is a static method
which in turn calls above method
goog.events.Event.stopPropagation = function(e) {
e.stopPropagation();
};
Edit : Please do read - Dangers of Event Propagation
加载中,请稍侯......
精彩评论