Silverlight的事件氣泡(EventBubbling)

元件重疊在一起，當發生滑鼠點擊事件，你發現他會從最上面的元件開始，每個元件都會發生事件，這現像不光只是有在Silverlight中有，Web或Window Form也有這現象。

如這個範例，當在Grid3上點擊，卻連Grid2與Grid3都發生事件。

(Silverlight實際範例，請各位在各Grid上點擊看看)

 

要防止這個現像也很簡單，只要讓MouseButtonEventArgs.Handled值為true就可以了。

private void Grid3_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
   e.Handled = true; //將Handled設定為true，其他元件就不會發生事件。
   MessageBox.Show("Grid3 Clicked");
}

在Silverlight中會發生事件氣泡的有如下:

• 滑鼠點擊
  • MouseLeftButtonDown
  • MouseLeftButtonUp
  • MouseRightButtonDown
  • MouseRightButtonUp

• 滑鼠滾輪

  • MouseWheel
• 拖曳
  • DragEnter
  • DragLeave
  • DragOver
  • Drop
• 鍵盤輸入
  • KeyDown
  • KeyUp
  • TextInput
  • TextInputStart
  • TextInputUpdate

 

哇~這麼多，你會不會想說為什麼系統不直接就設成True就好了，還要自己寫時自己注意多麻煩丫。

不過他真的這樣做，才真的麻煩。

<Button>
    <Border>
        <StackPanel Orientation="Horizontal">
            <Image/>
            <TextBlock/>
        </StackPanel>                
    </Border>            
</Button>

你想想，如果上面個範例，事件沒有氣泡，你在Button上點擊，Button還會發生Click事件嗎?

答案是不會，因為事件可能在Image或TextBlock上就結束了。

可Image只是佈局用的元件不應該Handled事件，但系統怎麼會知道Image是佈局用。

所以必需要自己設，那我們來比較一下是事件氣泡在Button中Handled，還是事件不氣泡而在Button下的所有子元件設定事件要向上傳遞。

是不是事件氣泡比較簡單。