Question

我是javascript的新手，所以我不确定如何做到这一点。基本上，在我的网站上，我有一种工具提示，当悬停在某些输入框上时显示。这是我的javascript：

function showTip () {
    firstnameTip.style.display = "inline";
}
function hideTip () {
    firstnameTip.style.display = "none";
}
/* link HTML elements to corresponding event function */
function init () {
    /* link the variables to the HTML elements */
    firstnameTip = document.getElementById("firstnameTip");
    firstname = document.getElementById("firstname");
    /* assigns functions to corresponding events */
    firstname.onmouseover = showTip; /* for mouse */
    firstname.onmouseout = hideTip;
    firstname.onfocus = showTip; /* for cursor on input field */
    firstname.onblur = hideTip; /* for cursor moving out */
}
/* execute the initialisation function once the window*/
window.onload = init;

基本上我想要的功能是，如果我将鼠标悬停在“firstname”上，它会显示firstnameTip，以及其他内容，例如lastname（lastnameTip）等。

简单的问题，但我尝试了很多东西，无法弄明白。有人有主意吗？感谢。

Answer 1

以下是我如何设置它：

function showTip (tipElement) {
    return function () {
        tipElement.style.display = "inline";
    };
}

function hideTip (element, tipElement) {
    return function () {
        if (document.activeElement !== element) {
            tipElement.style.display = "none";
        }
    };
}

function init() {
    initTipEvents("firstname", "firstnameTip");
    initTipEvents("lastname", "lastnameTip");
}

function initTipEvents(elementId, tipId) {
    var el = document.getElementById(elementId),
        tip = document.getElementById(tipId),
        showHandler = showTip(tip),
        hideHandler = hideTip(el, tip);

    el.onmouseover = showHandler;
    el.onfocus = showHandler;

    el.onmouseout = hideHandler;
    el.onblur = hideHandler;
}

window.onload = init;

DEMO： http://jsfiddle.net/LX2Cb/

initTipEvents根据元素的id及其提示id绑定所有必要的事件，重用已修改的showTip和hideTip函数。我在hideTip函数中添加了一个额外的检查，以确保当鼠标离开输入时未隐藏提示，但它仍然聚焦。

Answer 2

问题是什么？像魅力一样：

var firstnameTip;
var firstname;

function showTip () {
    firstnameTip.style.display = "inline";
}
function hideTip () {
    firstnameTip.style.display = "none";
}
/* link HTML elements to corresponding event function */
function init () {
    /* link the variables to the HTML elements */
    firstnameTip = document.getElementById("firstnameTip");
    firstname = document.getElementById("firstname");
    /* assigns functions to corresponding events */
    firstname.onmouseover = showTip; /* for mouse */
    firstname.onmouseout = hideTip;
    firstname.onfocus = showTip; /* for cursor on input field */
    firstname.onblur = hideTip; /* for cursor moving out */
}
/* execute the initialisation function once the window*/
init();

http://jsfiddle.net/6QvXT/

Answer 3

好的，为了让它更通用，你应该使用传递给处理程序的event参数并从中检索目标对象，如：

var getTarget = function (event)
{
    var ttn = null;
    if (!event) 
        event = window.event;
    else if (event.target) 
        ttn = event.target;
    else if (event.srcElement) 
        ttn = event.srcElement;

    var tipId = ttn.id + "Tip";
    ttn = document.getElementById(tipId);
    return ttn;
}

然后：

function showTip (evt) {
    var ttn = getTarget(evt);
    ttn.style.display = "inline";
}

function hideTip (evt) {
    var ttn = getTarget(evt);
    ttn.style.display = "none";
}

此外：

function init () {

    /* for all relevant elements */
    for ( .... ) // iterate through a list or the dom
    {
        var theElement = ....(); // get the element

        /* assigns functions to corresponding events */
        theElement.onmouseover = showTip; /* for mouse */
        theElement.onmouseout = hideTip;
        theElement.onfocus = showTip; /* for cursor on input field */
        theElement.onblur = hideTip; /* for cursor moving out */
     }
}
/* execute the initialisation function once the window*/
init();

希望有所帮助。

传递我的鼠标是什么功能 - javascript

3 个答案: