使用 Google Closure Library 防止事件传播

发布于 2024-11-17 01:51:45 字数 3099 浏览 3 评论 0原文

使用 Google Closure Library：

如何处理 元素（例如 div）的点击，但防止触发事件处理程序 当用户单击该元素的子元素时。

例如，在下面的代码中，我想在用户单击 div1 时触发事件处理程序，但当他/她单击“span1”时，我想要另一个事件处理程序 code> 被调用而不触发 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>

原文

Using Google Closure Library:

How can I handle clicking of an element for example a div but prevent 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

热风软妹 2024-11-24 01:51:45

对于纯 javascript 开发人员来说，答案就在此处，但是如果您使用Google Closure Library以下代码就足够了：

event.stopPropagation();

for pure javascript developers the answer is here but if you use Google Closure Library the following code is enough:

event.stopPropagation();

回复收藏 0 原文

恋你朝朝暮暮 2024-11-24 01:51:45

在该单击的事件处理程序中，您必须使用 PreventDefault()

例如：

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

in the event handler of that click you have to use preventDefault()

for example:

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

回复收藏 0 原文

柏拉图鍀咏恒 2024-11-24 01:51:45

仅供参考 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();
};

Edit ：
请务必阅读 - 事件传播的危险

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

回复收藏 0 原文

~没有更多了~

关于作者

青春有你

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

使用 Google Closure Library 防止事件传播

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

尘世孤行

烟─花易冷

你是年少的欢喜

倒带

忱杏

送君千里

友情链接

使用 Google Closure Library 防止事件传播

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

尘世孤行

烟─花易冷

你是年少的欢喜

倒带

忱杏

送君千里

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。