1# Event Monopolization 2 3Event monopolization determines whether a component exclusively handles events, including built-in events and custom click, touch, or gesture events.<br> 4When a component with event monopolization is the first to respond to an interaction, only the events defined on this component will be triggered, and other components within the same window will not respond to the interaction. 5 6> **NOTE** 7> 8> The initial APIs of this module are supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 9 10## monopolizeEvents 11 12monopolizeEvents(monopolize: boolean): T 13 14Sets whether the component exclusively handles events. 15 16**Atomic service API**: This API can be used in atomic services since API version 12. 17 18**System capability**: SystemCapability.ArkUI.ArkUI.Full 19 20**Parameters** 21 22| Name | Type| Mandatory| Description | 23| ----------- | -------- | ------------------------ | ------------------------ | 24| monopolize | boolean | Yes| Whether the component exclusively handles events. <br>**true**: The component exclusively handles events.<br>**false**: The component does not exclusively handle events.<br>Default value: **false**.<br>**NOTE**<br>1. If a component is exclusively handling events after a finger is pressed on it, and another finger is pressed before the first finger is lifted, the component continues to exclusively handle events while interacting with the second finger. The same case applies to a third and more fingers.<br>2. If a component is bound through [parallelGesture](ts-gesture-settings.md) to a gesture, for example, [pan gesture](ts-basic-gestures-pangesture.md), that can also be triggered by its child component, and the child component has event monopolization and is the first to respond, then the parent will not respond to the gesture.| 25 26**Return value** 27 28| Type| Description| 29| -------- | -------- | 30| T | Current component.| 31 32## Example 33 34This example demonstrates how to set **monopolizeEvents** to determine whether a component exclusively handles events. 35 36```ts 37// xxx.ets 38@Entry 39@Component 40struct Index { 41 @State message: string = 'set monopolizeEvents false'; 42 @State messageOut: string = ' '; 43 @State messageInner: string = ' '; 44 @State monopolize: boolean = false; 45 46 build() { 47 Column() { 48 Text(this.message) 49 .fontSize(22) 50 .margin(10) 51 Text(this.messageOut) 52 .fontSize(22) 53 .margin(10) 54 Text(this.messageInner) 55 .fontSize(22) 56 .margin(10) 57 Button('clean') 58 .fontSize(22) 59 .margin(10) 60 // Change the value of the column's monopolizeEvents attribute through the button's click event. 61 .onClick(()=>{ 62 this.messageOut = " " 63 this.messageInner = " " 64 }) 65 Button('change monopolizeEvents') 66 .fontSize(22) 67 .margin(10) 68 // Change the value of the column's monopolizeEvents attribute through the button's click event. 69 .onClick(()=>{ 70 this.monopolize = !this.monopolize 71 if (!this.monopolize) { 72 this.message = "set monopolizeEvents false" 73 } else { 74 this.message = "set monopolizeEvents true" 75 } 76 }) 77 Column() { 78 Column(){} 79 // When this.monopolize is true, clicking the inner column triggers only a touch event on it, but not on the outer column. 80 // When this.monopolize is false, clicking the inner column triggers a touch event on it and the outer column. 81 .monopolizeEvents(this.monopolize) 82 .width('100%') 83 .height('40%') 84 .backgroundColor(Color.Blue) 85 // Bind the inner column to the touch event. 86 .onTouch((event:TouchEvent)=>{ 87 if (event.type == TouchType.Down) { 88 console.log("inner column touch down") 89 this.messageInner = "inner column touch down" 90 } 91 }) 92 } 93 .backgroundColor(Color.Gray) 94 .height('100%') 95 .width('100%') 96 // Bind the outer column to the touch event. 97 .onTouch((event)=>{ 98 if (event.type == TouchType.Down) { 99 console.log("outside column touch down") 100 this.messageOut = "inner column touch down" 101 } 102 }) 103 } 104 .height('100%') 105 } 106} 107``` 108 109
