Silverlight的事件氣泡(EventBubbling)

  • 14245
  • 0
  • 2010-06-10

元件重疊在一起,當發生滑鼠點擊事件,你發現他會從最上面的元件開始,每個元件都會發生事件,這現像不光只是有在Silverlight中有,Web或Window From也有這現象。
要防止這個現像也很簡單,只要讓MouseButtonEventArgs.Handled值為true就可以了。

 

 

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

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

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

image

 

要防止這個現像也很簡單,只要讓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下的所有子元件設定事件要向上傳遞。

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