Обработка кликов от веб-компонентов внутри других веб-компонентов

Я использовал Dart WebUI для создания компонента, который содержит другой компонент, подобный этому.

скриншот

Желаемый ответ на щелчок, который у меня был, заключался в том, что когда я нажимаю на внутренний компонент, он срабатывает внутри этого внутреннего компонента и не влияет на компонент, который его содержит. Однако событие щелчка на внутреннем компоненте срабатывает как во внутреннем, так и во внешнем компоненте.

Есть ли способ обработать щелчок внутри и предотвратить его «пузырение» до его родительского элемента?

<!DOCTYPE html>
<html>
  <head>
    <link rel="import" href="ColorItem.html">
  </head>
  <body>
    <element name="color-item-with-inside-color-item" constructor="ColorItemWithInsideColorItem" extends="ColorItem">
      <template>
        <style scoped>

              #inner-color-item div{
                border:5px solid WhiteSmoke;

              }

              #inner-color-item {
                  margin-top:10px; 
                  margin-bottom:0px;
              }

        </style>

        <color-item color_text="{{color_text}}" bg_color="{{bg_color}}" text_color="{{text_color}}">
           <color-item id="inner-color-item" style></color-item> <!-- THIS IS THE INNER ITEM -->
        </color-item>

      </template>      
      <script type="application/dart" src="ColorItemWithInsideColorItem.dart"></script>
    </element>
  </body>
</html>

dart event-handling dart-webui mouseclick-event
person MrMambo007    schedule 29.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В событии мыши evt вы должны иметь возможность вызывать evt.stopPropagation(), чтобы предотвратить всплывание.

person user1338952    schedule 29.06.2013
comment
Я пытаюсь поместить обработчик событий в событие щелчка элементов следующим образом: ‹color-item id=inner-color-item on-click=mouseEventHandler›‹/color-item›. И в сценарии дротика у меня есть обработчик, написанный так: mouseEventHandler(MouseEvent evt){ print(something); evt.stopPropagation(); } Но, к сожалению, он никогда не срабатывает. Вы случайно не знаете, как прослушивать событие щелчка по элементам внутри веб-компонента? Я попытался добавить слушателей внутри событий жизненного цикла, но не могу получить доступ к элементам внутри. Может быть, они создаются после вызова родительских элементов created()? - person MrMambo007; 30.06.2013
comment
Вероятно, есть несколько способов сделать это. Подход, который сработал для меня, находится внутри метода insert(), к которому я подключаю своих слушателей. Взгляните на: github.com/patefacio/split_panel /blob/master/lib/src/s_p_impl/ inserted вызывает _attachListeners, которые перехватывают события мыши с помощью: element.onMouseDown.listen( (e)...) Кроме того, убедитесь, что у вас есть установка build.dart и новый код генерируется при обновлении html. - person user1338952; 30.06.2013
comment
Спасибо за предложение. Я попробую это хакерское решение и посмотрю, сработает ли оно и для меня. Я настроил build.dart на автоматический запуск, но часто принудительно запускаю его, чтобы убедиться. Я надеюсь, что команда дартс сможет лучше задокументировать несколько подходов к обработке событий в веб-интерфейсе. Для новичка все еще малопонятно. - person MrMambo007; 30.06.2013