jQuery鼠标方向插件

对不起，伙计们，这不仅仅是一个问题，而是一个答案。 我见过很多人问如何使用js / jQuery识别定向鼠标移动，这是我今天下午给他们写的一个插件。

jQuery提供对标准JS鼠标事件以及一些自定义事件的支持。 在jQuery中，很容易捕获鼠标点是否已经进入对象的边界或者是否离开（mouseenter，mouseleave）或者发生了其他事情（如click，dblclick等）。 但如果您需要捕捉鼠标的方向，则会遇到麻烦。 如果有一个插件可以在任何可以监听并绑定监听程序例程的元素上触发自定义鼠标方向事件，那将是非常棒的。

我今天下午写了这个小插件（jQuery MouseDirection Plugin）来触发DOM结构中任何可见元素的八个自定义事件。 这是源代码

/** * jQuery Mouse Direction Plugin * @version: 1.1 * @author Hasin Hayder [[e-mail] | http://hasin.me] */ (function ($) { var options = {}; var oldx = 0; var oldy = 0; var direction=""; $.mousedirection = function (opts) { var defaults = { }; options = $.extend(defaults, opts); $(document).bind("mousemove", function (e) { var activeElement = e.target || e.srcElement; if (e.pageX > oldx && e.pageY > oldy) { direction="bottom-right"; } else if (e.pageX > oldx && e.pageY < oldy) { direction="top-right"; } else if (e.pageX < oldx && e.pageY < oldy) { direction="top-left"; } else if (e.pageX  oldy) { direction="bottom-left"; } else if (e.pageX > oldx && e.pageY == oldy) { direction="right"; } else if (e.pageX == oldx && e.pageY > oldy) { direction="down"; } else if (e.pageX == oldx && e.pageY < oldy) { direction="up"; } else if (e.pageX < oldx && e.pageY == oldy) { direction="left"; } $(activeElement).trigger(direction); $(activeElement).trigger({type:"mousedirection",direction:direction}); oldx=e.pageX; oldy=e.pageY; }); } })(jQuery) 

这是你如何使用它

       .container { height: 150px; margin: 20px; padding: 20px; width: 300px; border: 1px solid #888; }   
 Move your mouse over this box 
  $(function () { $.mousedirection(); $(".container").bind("mousedirection", function (e) { $(this).html("Mouse Direction: "+e.direction+""); }); });   

为了避免每次运行检查过度工作是否鼠标已经进入提供的DOM元素（通过选择器）我已经将鼠标指针下的活动元素定位并仅在该对象上触发事件 – 这是一个巨大的性能提升:)

从下面的链接下载带有example.html的完整插件

下载jQuery鼠标方向插件

：） 请享用！