使用 jQuery 在 Mousehoever 和 mouseout 上调用 javascript 函数答案

【问题标题】：Calling javascript function on the Mousehoever and mouseout using jQuery使用 jQuery 在 Mousehoever 和 mouseout 上调用 javascript 函数
【发布时间】：2010-05-07 14:38:25
【问题描述】：

我想使用 mousehover jQuery 事件调用 javascript 函数。

这是一个功能。

// On mouse hover function     
 function ShowHighlighter(d, highlight_elid) {
            //alert ("ShowHighlighter\n"+d);
            if (d == "addHighlight") {
                var txt = getSelText();
                if (txt.length < 1)
                {
                    return;
                }
                ShowContent(d);
            } else if (d == "deleteHighlight") {
                var elid = "#"+d;
                jQuery(elid).stop();
                ShowContent(d);
                delete_highlight_id = "#"+highlight_elid;
            }
        }


//   on Mouse out function
 function HideContent(d) {
        if(d.length < 1) { return; }    
        document.getElementById(d).style.display = "none";
    }

我正在尝试使用此功能...但它似乎不起作用。

jQuery('a[href="HIGHLIGHT_CREATELINK"]').mouseover(ShowHighlighter("deleteHighlight","highlight"+ randomCount + ");) ;
       jQuery('a[href="HIGHLIGHT_CREATELINK"]').mouseout('javascript:HideContentFade(\"deleteHighlight\");')

请帮我解决这个问题。

谢谢。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以使用hover 函数来缩短语法：

jQuery('a[href="HIGHLIGHT_CREATELINK"]').hover(function(evt) {
    ShowHighlighter("deleteHighlight", "highlight" + randomCount);
}, function(evt) {
    HideContentFade("deleteHighlight");
});

【讨论】：

【解决方案2】：

悬停事件有一个简写方法：http://api.jquery.com/hover/

jQuery('a[href="HIGHLIGHT_CREATELINK"]').hover(function() {
  // this is the mouseover handler
  ShowHighlighter("deleteHighlight","highlight"+ randomCount + ");
},
function() {
  // this is the mouseout handler
  HideContentFade("deleteHighlight");
});

【讨论】：

【解决方案3】：

尝试这样做：

    $('a[href="HIGHLIGHT_CREATELINK"]').mouseover(function(){
           ShowHighlighter("deleteHighlight","highlight"+ randomCount + ");
    }) ;
    $('a[href="HIGHLIGHT_CREATELINK"]').mouseout(function(){
           HideContentFade("deleteHighlight");
    });

由于某种原因，在 jQuery 中将事件绑定到元素时，您必须使用上述语法，而不是尝试将函数直接绑定到它。

【讨论】：

每次鼠标移动都会触发鼠标悬停，'mouseenter' 和 'mouseleave' 可能是更好的事件
你提到的原因是因为他要调用的函数需要特定的参数，所以他需要把它包装在另一个函数中。 jQuery 无法猜测 ShowHighlighter 期望的参数。此外，答案中提供的代码是调用ShowHighlighter并将其返回值传递给mouseover函数，这显然是错误的。
对不起，我的意思是说问题中提供的代码，而不是你的答案。我的错。

【解决方案4】：

你需要将你的函数封装在一个匿名函数中

类似的东西

jQuery('a[href="HIGHLIGHT_CREATELINK"]').mouseover(function () {
    ShowHighlighter("deleteHighlight","highlight"+ randomCount + ");
});

jQuery('a[href="HIGHLIGHT_CREATELINK"]').mouseout(function() {
    HideContentFade("deleteHighlight");
});

如果您不这样做，该函数将立即执行，而不是作为处理程序添加到事件中。

【讨论】：

每次鼠标移动都会触发鼠标悬停，“mouseenter”和“mouseleave”可能是更好的事件