Блог

Главная - Вопросы по программированию - OnMouseEnter не работает, когда мышь быстро перемещается по элементу

OnMouseEnter не работает, когда мышь быстро перемещается по элементу

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Я знаю, что этот вопрос задавали много раз, но я не нашел ответа, который дал бы мне возможность решить эту проблему

 <Zoom in timeout={500}>
    <div
        onMouseEnter={() => {
            console.log('enter')
        }}
        onMouseLeave={this.handlePopoverClose}
        className={classes.paperInside}>
            {providers.map((entity, index) => {
                return (<GameBox
                    key={index   'box'}
                        element={entity}
                        isDivider={index === 3 amp;amp; index !== 0}
                />)
            })}
        <Count
            count={count}
            to={`/games/${type}`}
            sectionName={element.name}
             />
    </div>
</Zoom>

Давайте представим, что у меня есть какой-то div элемент, когда я пытаюсь быстро провести мышью по этому элементу, он не работает. Я знаю, что если вы не введете элемент onMouseLeave , это не сработает. Но мне действительно нужно, чтобы это onMouseLeave срабатывало каждый раз, когда я ввожу end, а затем оставляю его. Пожалуйста, если мой вопрос недостаточно ясен, дайте мне знать

Комментарии:

1. Пожалуйста, проверьте мой ответ, если он покажется вам полезным. Спасибо

Ответ №1:

Ваш сценарий работает для меня, как и ожидалось. Я не знаю, с какой проблемой вы действительно столкнулись.

Вы можете взглянуть на мой пример

 <!doctype html>
<html>
  <head><title>onmouse event demo</title>
  </head>
  <body>
    <h3>onmouse event demo</h3>
    <p>Fires when the mouse pointer enters and leave the element.</p>
    <div id="mouse_event" style="width:300px;height:100px;border:1px solid;" onMouseEnter="javascript:document.getElementById('mouse_event').innerHTML = 'enter event has been triggered' " onMouseLeave="javascript:document.getElementById('mouse_event').innerHTML = 'leave event has been triggered' ">Demo text</div>
  </body>
</html>

рабочая демонстрация