A solution to the problem of nested mouseenter,mouseenter functions executing multiple times in jquery hover

It is known that the API hover in JQ is the combination of MouseEnter and MouseLeave, which is implemented in JQ ' Hover:function (fnover,fnout) {
Return This.mouseenter (Fnover). MouseLeave (fnout| | Fnover)
}。

The code is as follows

<! DOCTYPE html>
The problem is that after the code executes. When the mouse moves, the code executes.
With what we want, when the mouse enters, the internal not performing effect is inconsistent.
Each time MouseEnter, will add the binding event to DD, the binding event will not be overwritten, but will be executed according to the binding sequence, so it will be executed many times, event.stopPropagation is to prevent bubbling, does not block other events on the same node.
Master one can put the binding event to DD independent of hover, and second, can be hover after the end of the DD. Take a look at the following code:
Bind individually
$ (function () {    $ ('. Member-list dd '). On (' MouseEnter ', function () {        console.log (this);    });    $ ('. Unit-list '). Hover (function () {        console.log (' e n T e R ');    },function () {        console.log (' L e a v e ');    });});
hoverPost-undo Binding
<script>$ (function () {    var fmouseenter = function (e) {        console.log (this);    };    var jDd = $ ('. Member-list dd ');    $ ('. Unit-list '). Hover (function (e) {        jdd.on (' MouseEnter ', fmouseenter);        Console.log (' e n T e R ');    },function () {        jdd.off (' MouseEnter ', fmouseenter);        Console.log (' L e a v e ');})    ; </script>
Original address: https://yq.aliyun.com/ask/18480
A solution to the problem of nested mouseenter,mouseenter functions executing multiple times in jquery hover