我有一個(gè)動(dòng)態(tài)生成的列表，其中包含復(fù)雜的組件，這些組件應(yīng)該在mouseover.由于我使用 Angular，我嘗試使用(mouseover)="onhover($event)"和(mouseout)="onhover($event)在組件的最高父元素上構(gòu)建它，以獲取它并從那里路由到應(yīng)該更改的不同組件。<div class="my-list_element" id="{{'my-list_element' + i}}" (mouseover)="onhover($event)" (mouseout)="onhover($event)" >然后，打字稿代碼像常規(guī)一樣具有捕獲事件的函數(shù)：onhover(event: Event){
let id = (event.target as HTMLInputElement).id;
console.log(id.toString());
}在測試它是否有效時(shí)，我注意到，如果我不直接將鼠標(biāo)懸停在組件的父級(jí)上，子級(jí)的 id 就會(huì)記錄在控制臺(tái)中，這不會(huì)使靜態(tài)路由到應(yīng)該更改的元素成為可能。是否可以保持mouseover/mouseout在整個(gè)組件上可用，但仍然只能獲取整個(gè)組件的最高父級(jí)的 id？
2 回答
慕森卡
TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可以參考event.currentTarget而不是event.target：
Event 接口的 currentTarget 只讀屬性 [...] 始終指的是已附加事件處理程序的元素，而不是 Event.target，后者標(biāo)識(shí)發(fā)生事件的元素并且可能是其事件處理程序的元素。后裔。
在下面的代碼片段中請(qǐng)注意，無論哪個(gè)元素觸發(fā)事件，currentTarget始終是包含<li>元素：
function doStuff(e) {
? console.clear();
? console.log(`target: ${e.target.className}`); // div-child
? console.log(`currentTarget: ${e.currentTarget.className}`); // li-parent
}
ul {
? list-style: none;
? margin: 0;
? padding: 1rem;
? background: tomato;
}
li {
? padding: 0.25rem;
? background: bisque;
}
li div {
? background: white;
? margin: 0.5rem;
? padding: 0.5rem;
}
<ul>
? <li class="li-parent" onmouseover="doStuff(event)">
? ? <div class="div-child">child 1</div>
? ? <div class="div-child">child 2</div>
? </li>
</ul>
- 2 回答
- 0 關(guān)注
- 152 瀏覽
添加回答
舉報(bào)
0/150
提交
取消