javascript - 我怎样才能以正确的方式编写这个 jquery on() ？

Question

这是我所拥有的

$('.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(){
    }
});

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

Answer 1

您可以链接调用：

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

我想如果你愿意，你可以有一个检查事件类型的处理程序，但这似乎不那么奇怪。

Answer 2

如果您不想在两者中使用相同的选择器，则必须进行 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 中的错误

Answer 3

.on()也接受地图：

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

Answer 4

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

$('.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
    }
);