處理clickevents

我用飛鏢WebUI中創建包含這樣的另一個組件的組件。處理clickevents

screenshot

期望respons到點擊我的是，當我點擊該內部部件就可以觸發該內部部件的內部，並不會影響包含它的組件。然而，內部組件上的點擊事件在內部組件和外部組件都會觸發。

有沒有辦法來處理內部的點擊，並防止「冒泡」到它的父元素？

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

來源

2013-06-29 MrMambo007

鼠標事件EVT你應該能夠調用evt.stopPropagation（）防止冒泡。

來源

2013-06-29 21:03:45 user1338952

我儘量把事件處理程序上的元素上單擊事件是這樣的：<顏色項ID =「內部顏色項目」上單擊=「mouseEventHandler」>。在飛鏢腳本中，我有這樣寫的處理程序：mouseEventHandler（MouseEvent evt）print（「something」）; evt.stopPropagation（）; }但可悲的是，它永遠不會起火。您是否碰巧知道如何收聽webcomponent中的元素上的點擊事件？我曾嘗試在生命週期事件中添加偵聽器，但我無法訪問裏面的元素。也許它們是在父元素created（）被調用後創建的？ – MrMambo007

可能有多種方法來做到這一點。一種適用於我的方法是在我附加偵聽器的_inserted（）_方法內部。看一看：https://github.com/patefacio/split_panel/blob/master/lib/src/s_p_impl/s_p_panel_base.dart 的_inserted_調用__attachListeners_其掛接到鼠標事件有：_element.onMouseDown.listen（（ e）...）_ 此外，請確保您有build.dart設置，並在更新html時生成新代碼。 – user1338952

感謝您的建議。我會嘗試這個hacky解決方案，看看它是否也適用於我。我有build.dart設置爲自動運行，但經常強制運行它來確保。我希望飛鏢隊可以更好地記錄Web-UI中事件處理的多種方法。它對於一個新手來說仍然有些模糊。 – MrMambo007

回答

相關問題