Jquery '；鼠标器'；记录鼠标从元素内部输入的事件

请看

忽略CSS，这并不重要。

此

jQuery

代码的目的是告诉用户鼠标进入

.container

的方向。我知道这是一个丑陋的功能，但请忽略一段时间。方向以北、东北等方向表示

现在，如果您像疯子一样打开

控制台

并在

div.container

周围移动鼠标，最终您将在

控制台

中看到

未定义的

。（

div.container

不可见并包围圆形按钮）

只有在

getMovementDirection（）

中的

x===0&&y==0

时，值

未定义的

才可能，这意味着进入

div.container

时的

鼠标

位于

div.button

内（球形按钮），这是不可能的

所以，我的问题是，代码中发生了什么

-谢谢你的帮助

PS:

标题需要改进

jQuery代码

（函数（$）{
var$container=$（'div.container'），
$button=$（'div.button'）；
$container.on（'mouseenter'，函数（e）{
变量鼠标位置={
x:e.pageX，
y:e.pageY
}
var按钮位置={
x:$button.offset（）.左，
y:$button.offset（）.top
}
var loc=getMovementDirection（鼠标位置、按钮位置、jQuery）；
控制台日志（loc）；
});
})（jQuery）；
函数getMovementDirection（鼠标、容器、$）{
变量宽度=$（'div.button'）.outerWidth（），
高度=$（'div.button'）.outerHeight（）；
变量x，y；
if（mouse.x

这可能不是最优雅的解决方案，甚至不是修复方案，但我用另一种获取鼠标数据的方式更新了fiddle：

它不使用jquery内置的mouseenter事件，而是使用js本机mouseover事件，并且在mouseover位于按钮上时忽略。我认为jquery的运行方式可能会有一些额外的开销（我根本没有看它的代码），所以为什么不把它削减一点，使之更基本一些呢。另外，我从这里偷了addevent代码：

我根本不可能被解雇，但也许我只是不够紧张

更新

这是在每个鼠标上运行的jquery代码，用于执行mouseenter行为

// Create mouseenter/leave events using mouseover/out and event-time checks
jQuery.each({
    mouseenter: "mouseover",
    mouseleave: "mouseout"
}, function( orig, fix ) {
    jQuery.event.special[ orig ] = {
        delegateType: fix,
        bindType: fix,

        handle: function( event ) {
            var ret,
                target = this,
                related = event.relatedTarget,
                handleObj = event.handleObj;

            // For mousenter/leave call the handler if related is outside the target.
            // NB: No relatedTarget if the mouse left/entered the browser window
            if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
                event.type = handleObj.origType;
                ret = handleObj.handler.apply( this, arguments );
                event.type = fix;
            }
            return ret;
        }
    };
});

---

如果它在不同的元素上重新运行一些处理代码，可能会出现一些延迟。

这可能不是最优雅的解决方案，甚至不是修复方案，但我用不同的方式获取鼠标数据更新了fiddle：

它不使用jquery内置的mouseenter事件，而是使用js本机mouseover事件，并且在mouseover位于按钮上时忽略。我认为jquery的运行方式可能会有一些额外的开销（我根本没有看它的代码），所以为什么不把它削减一点，使之更基本一些呢。另外，我从这里偷了addevent代码：

我根本不可能被解雇，但也许我只是不够紧张

更新

这是在每个鼠标上运行的jquery代码，用于执行mouseenter行为

// Create mouseenter/leave events using mouseover/out and event-time checks
jQuery.each({
    mouseenter: "mouseover",
    mouseleave: "mouseout"
}, function( orig, fix ) {
    jQuery.event.special[ orig ] = {
        delegateType: fix,
        bindType: fix,

        handle: function( event ) {
            var ret,
                target = this,
                related = event.relatedTarget,
                handleObj = event.handleObj;

            // For mousenter/leave call the handler if related is outside the target.
            // NB: No relatedTarget if the mouse left/entered the browser window
            if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
                event.type = handleObj.origType;
                ret = handleObj.handler.apply( this, arguments );
                event.type = fix;
            }
            return ret;
        }
    };
});

---

如果在其他元素上重新运行某些处理代码，则可能会出现一些延迟。

这与问题无关，但您正在根据container.y+width而不是container.y+height检查鼠标.y。我能想到的唯一一件事是，从事件被触发的时间到鼠标捕获鼠标位置数据的位置都有轻微的延迟。如果有人在你的页面上癫痫发作，也许可以提出一个案例，并在这种情况下用按钮做些其他事情\事实上，我正计划制作一个迷你游戏，你试着点击一个按钮，它就会一直跑开。我知道jQuery不是最好的，但它只是为了好玩。但这件耽搁时间的事，如果是真的，就毁了我所有的计划：（PS:container width=height在本例中，但感谢您的更正，我忘记更改这与问题无关，但您正在检查鼠标.y与container.y+width，而不是container.y+height。我唯一能想到的是，从事件触发时起，以及您的鼠标何时在何处，会有轻微延迟。）它捕获了鼠标位置数据。也许可以提出一个例子，说明你的页面上是否有人癫痫发作，并在这种情况下用按钮做了其他事情？：\实际上，我正计划制作一个小游戏，在这个小游戏中，你尝试单击一个按钮，但它总是跑开。我知道jQuery不是最好的，但它只是为了好玩。但是如果时间延迟是真的，会毁了我所有的计划吗：（PS:container width=height在这种情况下，但是谢谢你纠正我，我忘了更改

Wut

没有被触发，因为你添加了这个：

if（e.target===$button[0]））return；

。如果是

wut

应该触发的情况，则会启动返回调用。当我删除它时，我能够获得

wut

firedSee，并且。看起来没有人这样做

// Create mouseenter/leave events using mouseover/out and event-time checks
jQuery.each({
    mouseenter: "mouseover",
    mouseleave: "mouseout"
}, function( orig, fix ) {
    jQuery.event.special[ orig ] = {
        delegateType: fix,
        bindType: fix,

        handle: function( event ) {
            var ret,
                target = this,
                related = event.relatedTarget,
                handleObj = event.handleObj;

            // For mousenter/leave call the handler if related is outside the target.
            // NB: No relatedTarget if the mouse left/entered the browser window
            if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
                event.type = handleObj.origType;
                ret = handleObj.handler.apply( this, arguments );
                event.type = fix;
            }
            return ret;
        }
    };
});