如何以正确的方式在()上编写这个jquery?

时间:2012-08-23 16:24:44

标签: javascript jquery syntax jquery-on

这就是我所拥有的

$('.test').on({
    'click', 'a', function(event) {
        event.stopPropagation();

        if( $(this).hasClass('selector') ) {
        }
        if( $(this).hasClass('prev') ) {
        }
        if( $(this).hasClass('next') ) {
        }
        return false;
    },
    mouseenter: function(){
    },
    mouseleave: function(){
    }
});

我知道这是错误的语法,那么正确的语法是什么?我知道如果我将点击和鼠标事件分开,我可以写它。但有没有办法将它们结合起来,还是我需要将它们分开?谢谢你的时间

4 个答案:

答案 0 :(得分:4)

你可以链接电话:

$('.test').on('click', 'a', function() { ... })
 .on('mouseenter', 'a', function() { ... })
 .on('mouseleave', 'a', function() { ... });

我想如果你想要你可以有一个检查事件类型的处理程序,但这看起来不那么奇怪。

答案 1 :(得分:3)

如果您不希望在两者中使用相同的选择器,则必须进行2次单独调用:

$('.test').on({
    mouseenter: function() {},
    mouseleave: function() {} //null selector/no selector here so these events only fire on `.test` itself
}).on("click", "a", function(event) { //Selector here so this event only fires for `a` descendants of `.test`
    event.stopPropagation();
    if ($(this).hasClass('selector')) {}
    if ($(this).hasClass('prev')) {}
    if ($(this).hasClass('next')) {}
    return false;
});

您也忘了指定事件参数,这会导致IE和Firefox中的错误

答案 2 :(得分:2)

.on()也接受地图

$('.test').on({
    click: function() {
    },
    mouseenter: function() {
    },
    mouseleave: function() {
    }
}, 'a');

答案 3 :(得分:0)

如果您只需要包装元素上的悬停事件,那么您需要单独绑定它的事件,因为它是一个单独的元素。

$('.test').on({
    click: function(event) {
        event.stopPropagation();
        if ($(this).hasClass('selector')) {}
        if ($(this).hasClass('prev')) {}
        if ($(this).hasClass('next')) {}
        return false;
    }
}, "a");

$('.test').hover( function(event){
        // This in the mouse enter handler  
    },
    function(event){
        // This is the mouse leave handler
    }
);