Menu
Im trying to implement hover event but onMouseLeave is not always triggering when leaving element especially when moving cursor over elements fast. I tried i Chrome, Firefox and Internet Explorer but in every browser same problem appeared.
My code:
import React from 'react'; import Autolinker from 'autolinker'; import DateTime from './DateTime.jsx' class Comment extends React.Component{ constructor(props){ super(props); this.handleOnMouseOver = this.handleOnMouseOver.bind(this); this.handleOnMouseOut = this.handleOnMouseOut.bind(this); this.state = { hovering: false }; } render(){ return <li className="media comment" onMouseEnter={this.handleOnMouseOver} onMouseLeave={this.handleOnMouseOut}> <div className="image"> <img src={this.props.activity.user.avatar.small_url} width="42" height="42" /> </div> <div className="body"> {this.state.hovering ? null : <time className="pull-right"><DateTime timeInMiliseconds={this.props.activity.published_at} byDay={true}/></time>} <p> <strong> <span>{this.props.activity.user.full_name}</span> {this.state.hovering ? <span className="edit-comment">Edit</span> : null} </strong> </p> </div> </li>; } handleOnMouseOver(event){ event.preventDefault(); this.setState({hovering:true}); } handleOnMouseOut(event){ event.preventDefault(); this.setState({hovering:false}); } newlines(text) { if (text) return text.replace(/\n/g, '<br />'); } } export default Comment; 
252
We do this by adding onMouseOver to the button element. After declaring that this element has an onMouseEnter event handler, we can choose what function we want to trigger when the cursor hovers over the element. We declare a function called changeBackground above the view part of the React Component.
This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).
The mouseover event triggers when the mouse pointer enters the div element, and its child elements. The mouseenter event is only triggered when the mouse pointer enters the div element. The onmousemove event triggers every time the mouse pointer is moved over the div element.
event.target gives you the native DOMNode , then you need to use the regular DOM APIs to access attributes. For instance getAttribute or dataset <button data-space="home" className="home" data-txt="Home" onClick={ this. props. onClick } /> Button </button> onClick(e) { console. log(e.
seems to be an issue caused by event delegation when the event listener is on the parent element and child elements are being conditionally added/removed from the DOM. putting a "hover target" component that sits on top of everything should make this work properly, but could cause other issues if you need to click elements inside.
<Container isOpen={this.state.isOpen}> <HoverTarget onMouseEnter={e => this.mouseOver(e)} onMouseLeave={e => this.mouseOut(e)} /> <Content/> </Container> mouseOver(e) { if (!this.state.isOpen) { this.setState({ isOpen: true }); } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
