onMouseLeave and onMouseOut are activated too quickly;

Question

Is there a way to lower down the sensitivity of firing events onMouseLeave or onMouseOut. Because I want to apply them for a pop up dialog, except they are firing all the time when the mouse is over the text (i.e. div tag), only when I calm down totally then they are not firing and the pop up dialog is ok. Functionalities are obviously working but the sensitivity of mouse events is too high.

Here is my most important parts of the code:

<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>

Try `this.mouseLeave = Ext.Function.createBuffered(this.mouseLeave, 300);` it creates a buffered function which is executed after 300 ms the last time it was called. See https://docs.sencha.com/extjs/6.5.3/modern/Ext.Function.html#method-createBuffered — And-y, Jun 06 '18 at 12:06

Georgi Antonov · Answer 1 · 2018-06-06T08:33:09.480

0

You can throttle the event using lodash.throttle

element.addEventListener('mouseout', _.throttle(callback, 100)); // 100 miliseconds

callback is the functon you do on mouseout

EDIT

Well i dont understand react but as i can see must be somethng like this

this.mouseOver // seems to be a method in your ViewModel so

mouseOver: _.throttle(() => {
        // do something here or call another function like
        this.yourFunctionFromViewModelForMouseOver();
},100)

Same for onMouseLeave={this.mouseLeave}

mouseLeave: _.throttle(() => {
            // do something here or call another function like
            this.yourFunctionFromViewModelForMouseLeave();
    },100)

edited Jun 06 '18 at 08:33

answered Jun 06 '18 at 08:27

Georgi Antonov

1,581
21
40

Can you tell me where to add that line? – Милош Рајковић Jun 06 '18 at 08:28
Tried with that, it doesn't work unfortunately... I wll try with new answer above... – Милош Рајковић Jun 06 '18 at 08:49

score 0 · Answer 2 · answered Jun 06 '18 at 08:42

0

Try lodash.debounce => link

Usage:

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

answered Jun 06 '18 at 08:42

dungmidside

508
7
19

You should put your code in somewhere like Codesandbox. Because your code is probably be wrong somewhere else – dungmidside Jun 06 '18 at 08:59

onMouseLeave and onMouseOut are activated too quickly;

2 Answers2