Question

我试图通过在submenu方法中使用多个处理程序来移动on。我想要的是，如果将鼠标移到li元素之一上，事件字符串mouseenter会检测到，然后执行function panelON，并且在mouseleave和{{1 }}。

所以我以各种方式编写了代码，但是所有代码都不起作用，并且每个代码都有其特定的错误。

function panelOFF

这将显示错误target = $('#home-menu-nav ul li'); target.on('mouseenter mouseleave', { convert: $('#submenu-content'), panelON(event) || panelOFF(event) }) function panelON(event) { if (event.type == 'mouseenter') { console.log('fx panelON detected') } else { return } }。似乎Unexpected token ||标记不能与处理程序的indie一起使用。

下一个我尝试的只是分组事件和处理程序，就像本文中一样。 link

||

无论我是否悬停target.on( {mouseenter: panelON(event)}, {mouseleave: panelOFF(event)} ) function panelON(event) { console.log('fx panelON detected') } function panelOFF(event) { console.log('fx panelOFF detected') }，此操作都立即开始。

target

最后一个。此仅打印target = $('#home-menu-nav ul li'); target.on( {mouseenter: function() { console.log('fx panelON detected') }}, {mouseleave: function() { console.log('fx panelOFF detected') }} )。 mouseenter不起作用。 .on方法中是否可以在事件和处理程序之间进行赋值和匹配？

Answer 1

使用绑定的on(object)版本时，必须给它一个对象，其中包含event：handler的键/值对，如下所示。

$('button').on({
  mouseenter: function(){ console.log('Im In!'); }
  , mouseleave: function(){ console.log('Im Out!'); }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hover Me</button>

Answer 2

@kekboi，欢迎来到StackOverflow！

第二次尝试

target.on( {mouseenter: panelON(event)}, {mouseleave: panelOFF(event)} )

非常接近。鉴于函数上的()会立即调用给定的函数，这不是您想要的，并且正如@Taplar所建议-在一个对象on(object)上-我建议您使用以下版本。

target.on({ mouseenter: panelON, mouseleave: panelOFF });

$(function() {
    var target = $('button.mybutton');
    
    target.on({ mouseenter: panelON, mouseleave: panelOFF });

    function panelON(event) {
        console.log('fx panelON detected')
    }

    function panelOFF(event) {
        console.log('fx panelOFF detected')
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="mybutton">Hover Me Now</button>

如何在.on方法中提供多个事件和处理程序？

2 个答案: