如何定义一个私有事件[将Mootools移植到jquery]

Question

我是mootools的忠实粉丝。但是现在我必须将mootools-snipe移植到jquery中，但我不明白。

我正在使用这个代码:

var  prev_m_x = 0;
var  prev_m_y = 0;
window.addEvent('mousemove',function(e){
            prev_m_x=e.page.x;
            prev_m_y=e.page.y;
     });
Element.Events.enterfromleft ={
    base: 'mouseover',
    condition: function(event){
        var elpos = this.getPosition();
        if(prev_m_x<=elpos.x)  return true; return;
    }
};
Element.Events.enterfromright ={
    base: 'mouseover',
    condition: function(event){
        var elpos = this.getPosition();
        if(prev_m_x>=(elpos.x+this.getWidth())) return true; return;
    }
};

定义我的事件。

最后，我将以以下方式使用这些事件:

el.addEvents({
    'enterfromleft':function(e){
          ...
    },
    'enterfromright':function(e){
    } ...

我尝试在jquery中做类似的事情，但没有成功。请看这里:http://jsfiddle.net/tFw89/33/

我要做什么在jquery中定义一个私有事件?谢谢你的帮助。

Answer 1

你可以写一个插件

(function($) {
    var prev_m_x = 0;
    var prev_m_y = 0;
    $(document).on('mousemove', function(e) {
        prev_m_x = e.pageX;
        prev_m_y = e.pageY;
    });
    $.fn.mouseMove = function(type) {
        return this.each(function() {
            var $this = $(this);
            $this.on('mouseover', function(e) {
                if (prev_m_x <= e.pageX) {
                    $this.trigger('enterfromleft')
                } else {
                    $this.trigger('enterfromright')
                }
            });
        });
    };
})(jQuery);
$('#myButton').on('enterfromleft', function(){
    console.log('enterfromleft')
});
$('#myButton').on('enterfromright', function(){
    console.log('enterfromright')
});
$('#myButton').mouseMove()

演示:小提琴

修复了跟踪鼠标移动的问题，将鼠标移动事件注册到文档上，而不是元素上。