jquery - 如何定义一个私人事件 [Port Mootools to 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()

演示：小提琴

与跟踪鼠标移动相关的修复，在文档上注册鼠标移动事件，而不是在元素上。