Question

我使用Dart WebUI创建了一个包含其他组件的组件。

screenshot

单击我所需的响应是，当我单击内部组件时，它会触发该内部组件内部并且不会影响包含它的组件。但是，内部组件上的单击事件会在内部组件和外部组件中触发。

有没有办法处理内部的点击并阻止它“冒泡”到其父元素？

<!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>

Answer 1

在鼠标事件 evt 上，您应该可以调用 evt.stopPropagation（）来防止冒泡。

处理来自其他web组件内部的webcomponents的clickevents

1 个答案: