Зарегистрируйте клик кроме определенного элемента - PullRequest
Новая
       38

Зарегистрируйте клик кроме определенного элемента

0 голосов
/ 15 декабря 2011

У меня есть функция javasccript, которая показывает или скрывает «промежутки», когда я нажимаю на вход, чтобы показать подсказки, когда пользователь заполняет формы: 

function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");

for (var i=0; i<inputs.length; i++){
    // test to see if the hint span exists first
    if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
        // the span exists!  on focus, show the hint
        inputs[i].onfocus = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
        }
        // when the cursor moves away from the field, hide the hint
        inputs[i].onblur = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "none";
        }
    }
}
}

Моя проблема в том, что когда я пытаюсь добавить ссылку к тексту подсказки, пользователь не может щелкнуть ее, потому что она сначала регистрируется с событием onblur, и подсказка исчезает, поэтому я хотел бы знать, как изменить эту функцию, чтобы он не скрывается при нажатии на подсказку.

Ответы [ 2 ]

1 голос
/ 15 декабря 2011

Вы можете использовать логическое значение var, чтобы проверить, наведен ли пользователь на вашу подсказку, а затем на onblur, а не на мышь. Если вы скрываете подсказку.

Что-то вроде этого в вашей петле: 

var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
    (function(i) {
        // Let the code cleaner :)
        var span = inputs[i].nextElementSibling;

        span.onmouseover = function() { this.isOver = true; }
        span.onmouseout = function() { this.isOver = false; if(!inputs[i].isFocus) inputs[i].onblur(); }

        // the span exists!  on focus, show the hint
        inputs[i].onfocus = function () {
            this.isFocus = true;
            span.style.display = "inline";
        }
        // when the cursor moves away from the field, hide the hint
        inputs[i].onblur = function () {
            this.isFocus = false;
            if(!span.isOver) span.style.display = "none";
        }
    })(i);
}

Я поместил самозапускающуюся функцию только для того, чтобы сохранить область действия var i, у вас нет проблем с функцией mmoutout.

РЕДАКТИРОВАТЬ: Обновлен пример

Ваш код для получения следующего диапазона не будет работать, поэтому я перешел на nextElementSibling, потому что пример, который вы поместили в jsfiddler .

0 голосов
/ 21 декабря 2011

Это новый рабочий код: 

$(function(prepareInputsForHints) {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
    (function(i) {
        // Let the code cleane
        var span = inputs[i].nextElementSibling;

    if(span instanceof HTMLSpanElement) {

if(span.className == "hint") {


        span.onmouseover = function() { this.isOver = true; }
        span.onmouseout = function() { this.isOver = false; if(!inputs[i].isFocus) inputs[i].onblur(); }

        // the span exists!  on focus, show the hint
        inputs[i].onfocus = function () {
            this.isFocus = true;
            span.style.display = "inline";
        }
        // when the cursor moves away from the field, hide the hint
        inputs[i].onblur = function () {
            this.isFocus = false;
            if(!span.isOver) span.style.display = "none";
        }
}       
    }
    })(i);
}
});
...