Question

我调用一个悬停函数来显示一个对话框作为工具提示，而单击函数则显示一个带有额外类的相同对话框在悬停时隐藏。

它工作一次，但第二次没有反映对话框。它会阻挡悬停。

如何分隔Mouseover和Click事件？

var clicked = false
$("izzy").observe('mouseover', function() {
     if(!clicked) {
        $('izzy').setStyle({ color: '#FFFFFF' });
     }
});

$("izzy").observe('mouseout', function() {
     if(!clicked) {
        $('izzy').setStyle({ color: '#666666' });
     }
});

$("izzy").observe('click', function() {
    clicked = true
    $('izzy').setStyle({ color: '#cccccc' });
});

Answer 1

if(!clicked) {设置为clicked后，true阻止内的代码永远不会被执行。 clicked上的true设置为click，因此clicked设置为true后callback function为mouseover＆amp; ; mouseout听众不会做任何事情。按照上面的代码。

以下代码应足以满足您的预期行为。

$("izzy").observe('mouseover', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

$("izzy").observe('mouseout', function() {
    $('izzy').setStyle({ color: '#666666' });
});

$("izzy").observe('click', function() {
    $('izzy').setStyle({ color: '#cccccc' });
});

在mouseover color将设置为#fff
在click color将设置为#ccc
mouseout发生后，颜色会重置为#666
下次，mouseover color将再次设置为#fff

如何使用Jquery / Javascript分离悬停和单击事件？

1 个答案: