Передача моей функции мыши - javascript

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

нормально, чтобы иметь, что более общий характер, вы должны использовать параметр события, передаваемый обработчику и получения целевого объекта из этого, как:

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(); 

надеется, что это поможет.