предотвратить распространение событий с помощью библиотеки Google Closure - PullRequest
Новая
       56

предотвратить распространение событий с помощью библиотеки Google Closure

2 голосов
/ 27 июня 2011

Использование Google Closure Library :

Как я могу обработать нажатие element, например, div, но предотвратить запуск 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>

ОБНОВЛЕНИЕ

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>

Ответы [ 4 ]

9 голосов
/ 27 июня 2011

для чистого javascript разработчиков ответ здесь , но если вы используете Google Closure Library , то достаточно следующего кода: 

event.stopPropagation();
4 голосов
/ 27 июня 2011

в обработчике событий этого клика вы должны использовать protectDefault ()

например: 

document.getElementById('div1').onclick = function (event) {
   //your code
   event.preventDefault();
}
2 голосов
/ 27 июня 2011

Вы должны прочитать эту ссылку, чтобы узнать больше о событии http://www.quirksmode.org/js/events_order.html

1 голос
/ 20 августа 2013

Только для справки Все события в Google Closure получены из goog.events.Event

http://docs.closure -library.googlecode.com / мерзавец / 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();
};

Редактировать: Пожалуйста, прочитайте - Опасности распространения событий

...