onMouseLeave и onMouseOut активируются слишком быстро;
Есть ли способ снизить чувствительность стрельбы по событиям onMouseLeave или onMouseOut. Потому что я хочу применить их для всплывающего диалога, за исключением того, что они запускаются все время, когда мышь находится над текстом (т. Е. Тегом div), только когда я полностью успокоюсь, они не запускаются, и всплывающее диалоговое окно в порядке, Функциональные возможности, очевидно, работают, но чувствительность событий мыши слишком высока.
Вот мои самые важные части кода:
<div className="titleUnderLogo">
<br /> <br />
{applicationDataDefinition.map((item) =>
<div className="titleUnderLogo" onMouseOver = {this.mouseOver} onMouseLeave={this.mouseLeave} /* Tried with this also onMouseOut={this.mouseOut} */ >
{item.name} {item.release} - {item.level} - {item.location}
</div>
)}
<br /> <br />
<Container >
<Dialog
displayed = {showDialog}
title="Product name"
modal={true}
layout="center"
defaultFocus="#ok"
ui="titleUnderLogoCls"
closeAction="hide"
maskTapHandler={this.mouseTapped}
onHide={() => this.setState({ showDialog: false })}
>
{applicationDataDefinition.map((item) =>
<div>
<table>
<tr>
<td> <b> Product name: </b> </td>
<td> {item.name} </td>
</tr>
<tr>
<td> <b> Release: </b> </td>
<td> {item.release} </td>
</tr>
<tr>
<td> <b> Last fix installed: </b> </td>
<td> {item.lastFix} </td>
</tr>
<tr>
<td> <b> Environment: </b> </td>
<td> {item.level} </td>
</tr>
<td> <b> Location: </b> </td>
<td> {item.location} </td>
</table>
</div>
)}
</Dialog>
</Container>
</div>
2 ответа
Вы можете ограничить событие, используя lodash.throttle
element.addEventListener('mouseout', _.throttle(callback, 100)); // 100 miliseconds
callback
это функция, которую вы делаете при мышлении
РЕДАКТИРОВАТЬ
Ну, я не понимаю, реагировать, но, как я вижу, должно быть что-то вроде этого
this.mouseOver
// кажется, что метод в вашей ViewModel так
mouseOver: _.throttle(() => {
// do something here or call another function like
this.yourFunctionFromViewModelForMouseOver();
},100)
То же самое для onMouseLeave={this.mouseLeave}
mouseLeave: _.throttle(() => {
// do something here or call another function like
this.yourFunctionFromViewModelForMouseLeave();
},100)
Пытаться lodash.debounce
=> ссылка
Использование:
import _debounce from "lodash.debounce"
/* add this to countructor function or anywhere before you use mouseLeave function */
this.mouseLeave = _debounce(this.mouseLeave, 300); // 300 milliseconds