我有一個動態(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());
}在測試它是否有效時，我注意到，如果我不直接將鼠標(biāo)懸停在組件的父級上，子級的 id 就會記錄在控制臺中，這不會使靜態(tài)路由到應(yīng)該更改的元素成為可能。是否可以保持mouseover/mouseout在整個組件上可用，但仍然只能獲取整個組件的最高父級的 id？
2 回答
慕森卡
TA貢獻1806條經(jīng)驗 獲得超8個贊
您可以參考event.currentTarget而不是event.target：
Event 接口的 currentTarget 只讀屬性 [...] 始終指的是已附加事件處理程序的元素，而不是 Event.target，后者標(biāo)識發(fā)生事件的元素并且可能是其事件處理程序的元素。后裔。
在下面的代碼片段中請注意，無論哪個元素觸發(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)注
- 137 瀏覽
添加回答
舉報
0/150
提交
取消