使用Google闭包库防止事件传播
Prevent event propagation using Google Closure Library
使用谷歌闭包库:
如何处理element
(例如div
)的单击,但在用户单击该元素的子元素时防止触发event handler
。
例如,在以下代码中,我希望在用户单击div1
时激发event handler
,但当他/她单击"span1"时,我希望调用另一个event handler
,而不激发div1
的处理程序。
<div style="width: 400px" id="div1">
<span id="span1">click me to reload</span>
click here to Toggle accordion
</div>
更新
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>
对于纯javascript开发人员来说,答案就在这里,但如果您使用谷歌闭包库,以下代码就足够了:
event.stopPropagation();
在该点击的事件处理程序中,您必须使用preventDefault()
例如:
document.getElementById('div1').onclick = function (event) {
//your code
event.preventDefault();
}
仅供参考Google Closure中的所有事件都源自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();
};
编辑:请阅读-事件传播的危险
相关文章:
- 停止jquery中元素上的事件传播
- 停止点击事件传播
- 为什么我的按钮正在将事件传播到其父项
- 我可以停止某个函数上的事件传播吗
- AngularJS:如何通过点击停止事件传播
- 避免通过指令中的事件传播进行自切换
- 棱角分明如何防止点击事件传播到日期选取器元素
- 停止自动回发复选框的事件传播
- jQuery 事件传播无法按预期工作
- 用于停止事件传播的 jQuery UI 滑块
- 在 Google Maps API v3 中有效启用事件传播
- 停止传单事件传播
- 角度/离子点击事件传播
- setAbstractView() 可防止鼠标关闭事件传播到 KmlFeatures
- Phaser JS如何停止事件从textButton.events.onInputDown事件传播(触发)到game.i
- 仅追加一次 UI 元素,避免事件传播
- JavaScript + 事件传播
- 在表行单击时停止 JS 事件传播
- 停止特定处理程序的事件传播
- 无法停止 AngularJS 中路由控制器之间的事件传播