🚀前言 鍵鼠事件是指在計(jì)算機(jī)操作中,用戶通過鍵盤和鼠標(biāo)來與計(jì)算機(jī)進(jìn)行交互的行為。常見的鍵鼠事件包括按下鍵盤上的鍵、移動(dòng)鼠標(biāo)、點(diǎn)擊鼠標(biāo)左鍵或右鍵等等。鍵鼠事件可以觸發(fā)許多不同的操作,比如在文本編輯器中輸入文字、在游戲中移動(dòng)角色、在網(wǎng)頁上點(diǎn)擊鏈接等等。計(jì)算機(jī)操作系統(tǒng)和應(yīng)用程序可以通過監(jiān)聽
鍵鼠事件是指在計(jì)算機(jī)操作中,用戶通過鍵盤和鼠標(biāo)來與計(jì)算機(jī)進(jìn)行交互的行為。常見的鍵鼠事件包括按下鍵盤上的鍵、移動(dòng)鼠標(biāo)、點(diǎn)擊鼠標(biāo)左鍵或右鍵等等。鍵鼠事件可以觸發(fā)許多不同的操作,比如在文本編輯器中輸入文字、在游戲中移動(dòng)角色、在網(wǎng)頁上點(diǎn)擊鏈接等等。計(jì)算機(jī)操作系統(tǒng)和應(yīng)用程序可以通過監(jiān)聽鍵鼠事件來響應(yīng)用戶的操作,并進(jìn)行相應(yīng)的處理。
onHover是鼠標(biāo)事件的一種,指的是鼠標(biāo)懸停在某個(gè)元素上時(shí)觸發(fā)的事件。當(dāng)鼠標(biāo)懸停在一個(gè)元素上時(shí),可以通過onHover事件來執(zhí)行一些特定的操作,比如顯示提示信息、改變?cè)貥邮降取?
onHover(event: (isHover?: boolean) => void)
案例:
// xxx.ets
@Entry
@Component
struct MouseExample {
@State isHovered: boolean = false;
build() {
Column() {
Button(this.isHovered ? 'Hovered!' : 'Not Hover')
.width(200).height(100)
.backgroundColor(this.isHovered ? Color.Green : Color.Gray)
.onHover((isHover: boolean) => { // 使用onHover接口監(jiān)聽鼠標(biāo)是否懸浮在Button組件上
this.isHovered = isHover;
})
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}
}
好像本地模擬器,預(yù)覽,遠(yuǎn)程真機(jī)都沒效果
onMouse是一種在鼠標(biāo)與頁面的交互過程中出現(xiàn)的操作事件。它通常作為一種觸發(fā)函數(shù),當(dāng)用戶在頁面上使用鼠標(biāo)進(jìn)行某種操作時(shí),就會(huì)觸發(fā)相應(yīng)的事件,然后執(zhí)行相應(yīng)的操作。onMouse事件可以用于捕捉鼠標(biāo)的各種操作,例如鼠標(biāo)點(diǎn)擊、鼠標(biāo)移動(dòng)、鼠標(biāo)滾動(dòng)、鼠標(biāo)懸停等。
onMouse(event: (event?: MouseEvent) => void)
案例:
// xxx.ets
@Entry
@Component
struct MouseExample {
@State isHovered: boolean = false;
@State buttonText: string = '';
@State columnText: string = '';
build() {
Column() {
Button(this.isHovered ? 'Hovered!' : 'Not Hover')
.width(200)
.height(100)
.backgroundColor(this.isHovered ? Color.Green : Color.Gray)
.onHover((isHover: boolean) => {
this.isHovered = isHover
})
.onMouse((event: MouseEvent) => { // 給Button組件設(shè)置onMouse回調(diào)
this.buttonText = 'Button onMouse:\n' + '' +
'button = ' + event.button + '\n' +
'action = ' + event.action + '\n' +
'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
'screenXY=(' + event.screenX + ',' + event.screenY + ')';
})
Divider()
Text(this.buttonText).fontColor(Color.Green)
Divider()
Text(this.columnText).fontColor(Color.Red)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.borderWidth(2)
.borderColor(Color.Red)
.onMouse((event: MouseEvent) => { // 給Column組件設(shè)置onMouse回調(diào)
this.columnText = 'Column onMouse:\n' + '' +
'button = ' + event.button + '\n' +
'action = ' + event.action + '\n' +
'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
'screenXY=(' + event.screenX + ',' + event.screenY + ')';
})
}
}
好像也沒效果
事件冒泡是一種事件傳播機(jī)制,指的是當(dāng)一個(gè)元素觸發(fā)了某個(gè)事件時(shí),該事件會(huì)從觸發(fā)元素開始向上層元素逐級(jí)傳播,直到最頂層的元素為止。在事件冒泡的過程中,父級(jí)元素會(huì)逐級(jí)接收該事件,并可以選擇是否處理該事件。
具體來說,當(dāng)一個(gè)元素觸發(fā)了某個(gè)事件時(shí)(比如鼠標(biāo)點(diǎn)擊、按鍵按下等),會(huì)先執(zhí)行觸發(fā)元素上綁定的事件處理函數(shù),然后事件會(huì)向上級(jí)元素傳播,逐級(jí)執(zhí)行上級(jí)元素上綁定的事件處理函數(shù),直到達(dá)到文檔頂層的根元素或者事件被停止傳播為止。
事件冒泡的好處在于它可以讓事件的處理更加靈活。通過將事件處理程序綁定在祖先元素上,可以實(shí)現(xiàn)對(duì)后代元素的事件統(tǒng)一管理。比如,當(dāng)頁面中有多個(gè)按鈕時(shí),可以通過將點(diǎn)擊事件處理程序綁定在父元素上,來處理所有按鈕的點(diǎn)擊事件,避免了為每個(gè)按鈕都綁定事件處理函數(shù)的繁瑣。
事件冒泡有時(shí)也可能會(huì)帶來一些問題。當(dāng)多個(gè)元素重疊時(shí),事件觸發(fā)后會(huì)逐級(jí)向上冒泡,導(dǎo)致多個(gè)元素都接收到了該事件,可能會(huì)產(chǎn)生意外的行為。在這種情況下,可以通過使用事件的stopPropagation()方法來阻止事件繼續(xù)傳播,或者使用事件的target屬性來判斷事件源,從而實(shí)現(xiàn)精確控制事件的處理。
event.stopPropagation()可以阻止事件冒泡
Button(this.isHovered ? 'Hovered!' : 'Not Hover')
.width(200)
.height(100)
.backgroundColor(this.isHovered ? Color.Green : Color.Gray)
.onHover((isHover: boolean) => {
this.isHovered = isHover;
})
.onMouse((event: MouseEvent) => {
event.stopPropagation(); // 在Button的onMouse事件中設(shè)置阻止冒泡
this.buttonText = 'Button onMouse:\n' + '' +
'button = ' + event.button + '\n' +
'action = ' + event.action + '\n' +
'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
'screenXY=(' + event.screenX + ',' + event.screenY + ')';
})
hover effect是指當(dāng)鼠標(biāo)懸停在一個(gè)元素上時(shí),觸發(fā)特定的效果。
hoverEffect(value: HoverEffect)
// xxx.ets
@Entry
@Component
struct HoverExample {
build() {
Column({ space: 10 }) {
Button('Auto')
.width(170).height(70)
Button('Scale')
.width(170).height(70)
.hoverEffect(HoverEffect.Scale)
Button('Highlight')
.width(170).height(70)
.hoverEffect(HoverEffect.Highlight)
Button('None')
.width(170).height(70)
.hoverEffect(HoverEffect.None)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}
}
onKeyEvent是一個(gè)在編程中常見的事件處理函數(shù),用于處理按鍵事件。當(dāng)用戶按下或釋放一個(gè)按鍵時(shí),系統(tǒng)會(huì)生成一個(gè)按鍵事件,然后通過調(diào)用onKeyEvent函數(shù)來處理這個(gè)事件。
在onKeyEvent函數(shù)中,可以根據(jù)發(fā)生的按鍵事件類型,采取相應(yīng)的處理邏輯。比如,可以判斷按下的按鍵是哪個(gè)鍵,然后執(zhí)行相應(yīng)的操作。常見的操作包括:移動(dòng)游戲角色、打開菜單、執(zhí)行特定的動(dòng)作等等。
onKeyEvent(event: (event?: KeyEvent) => void)
案例:
// xxx.ets
@Entry
@Component
struct KeyEventExample {
@State buttonText: string = '';
@State buttonType: string = '';
@State columnText: string = '';
@State columnType: string = '';
build() {
Column() {
Button('onKeyEvent')
.width(140).height(70)
.onKeyEvent((event: KeyEvent) => { // 給Button設(shè)置onKeyEvent事件
if (event.type === KeyType.Down) {
this.buttonType = 'Down';
}
if (event.type === KeyType.Up) {
this.buttonType = 'Up';
}
this.buttonText = 'Button: \n' +
'KeyType:' + this.buttonType + '\n' +
'KeyCode:' + event.keyCode + '\n' +
'KeyText:' + event.keyText;
})
Divider()
Text(this.buttonText).fontColor(Color.Green)
Divider()
Text(this.columnText).fontColor(Color.Red)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
.onKeyEvent((event: KeyEvent) => { // 給父組件Column設(shè)置onKeyEvent事件
if (event.type === KeyType.Down) {
this.columnType = 'Down';
}
if (event.type === KeyType.Up) {
this.columnType = 'Up';
}
this.columnText = 'Column: \n' +
'KeyType:' + this.buttonType + '\n' +
'KeyCode:' + event.keyCode + '\n' +
'KeyText:' + event.keyText;
})
}
}
機(jī)器學(xué)習(xí):神經(jīng)網(wǎng)絡(luò)構(gòu)建(下)
閱讀華為Mate品牌盛典:HarmonyOS NEXT加持下游戲性能得到充分釋放
閱讀實(shí)現(xiàn)對(duì)象集合與DataTable的相互轉(zhuǎn)換
閱讀鴻蒙NEXT元服務(wù):論如何免費(fèi)快速上架作品
閱讀算法與數(shù)據(jù)結(jié)構(gòu) 1 - 模擬
閱讀5. Spring Cloud OpenFeign 聲明式 WebService 客戶端的超詳細(xì)使用
閱讀Java代理模式:靜態(tài)代理和動(dòng)態(tài)代理的對(duì)比分析
閱讀Win11筆記本“自動(dòng)管理應(yīng)用的顏色”顯示規(guī)則
閱讀本站所有軟件,都由網(wǎng)友上傳,如有侵犯你的版權(quán),請(qǐng)發(fā)郵件[email protected]
湘ICP備2022002427號(hào)-10 湘公網(wǎng)安備:43070202000427號(hào)© 2013~2025 haote.com 好特網(wǎng)