我试图通过在submenu方法中使用多个处理程序来移动on
我想要的是,如果将鼠标移到li元素之一上,事件字符串mouseenter检测到,然后执行function panelON,并且在mouseleavefunction 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')
  }} )


最后一个。此仅打印mouseentermouseleave不起作用。
.on方法中是否可以在事件和处理程序之间进行赋值和匹配?

最佳答案

@kekboi,欢迎来到StackOverflow!

你第二次尝试

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


非常接近。鉴于函数上的()立即调用给定的函数,这不是您想要的,并且正如@Taplar所建议-on接受对象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>

09-17 18:21
查看更多