0

I have used Dart WebUI to create a component that contains another component like this.

screenshot

The desired respons to clicking I had was that when I click on the inner component it fires inside of that inner component and does not affect the component that contains it. However a click event on the inner component fires both in the inner and in the outer component.

Is there a way to handle the click on the inside and prevent it from "bubbling" up to its parent element?

<!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>
Shailen Tuli
  • 13,815
  • 5
  • 40
  • 51
MrMambo007
  • 133
  • 1
  • 7

1 Answers1

1

On the mouse event evt you should be able to call evt.stopPropagation() to prevent the bubbling up.

user1338952
  • 3,233
  • 2
  • 27
  • 41
  • I try to put an event handler on the elements on-click event like this: . And in the dart script I have the handler written like this: mouseEventHandler(MouseEvent evt){ print("something"); evt.stopPropagation(); } But sadly it never fires. Do you happen to know how to listen to on-click event on elements inside a webcomponent? I have tried adding listeners inside lifecycle events but I'm not able to access the elements inside. Maybe they are created after the parent elements created() is called? – MrMambo007 Jun 29 '13 at 23:23
  • There are probably multiple ways of doing this. An approach that worked for me is inside of the _inserted()_ method I attach my listeners. Have a look at: https://github.com/patefacio/split_panel/blob/master/lib/src/s_p_impl/s_p_panel_base.dart The _inserted_ calls __attachListeners_ which hooks into the mouse events with: _element.onMouseDown.listen((e)...)_ Also, make sure you have the build.dart setup and new code is being generated when you update html. – user1338952 Jun 30 '13 at 00:10
  • Thanks for the suggestesion. I'll try that hacky solution and see if it works for me too. I have the build.dart set up to run automatically but often force run it to make sure. I'd hope the dart team could better document multiple approaches to event handling in Web-UI. Its still slightly obscure for a newbie. – MrMambo007 Jun 30 '13 at 09:51