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