Сделайте что-нибудь на: цель с JavaScript - PullRequest
Новая
       34

Сделайте что-нибудь на: цель с JavaScript

1 голос
/ 23 ноября 2010

Я использую псевдо-селектор CSS3 :target для создания навигации внутри страницы без перезагрузки страницы. Это работает очень хорошо!

Но у меня есть проблема, мне нужно сбросить формы на странице, когда настроен таргетинг на страницу. Как я могу узнать, нацелен ли на элемент JavaScript Нравится element.ontarget = function();

Или, может быть, что-то вроде element.ondisplaychange -> element.oncsschange?

ЛУЧШЕЕ ОБНОВЛЕНИЕ: 

var hashcache = document.location.hash;
window.onhashchange = function() {
    if(hashcache != document.location.hash) {
        $(hashcache + ' form input').each(function() {
            $(this).val('');
        });
        hashcache = document.location.hash;
    }
}

UPDATE: 

$('a[href^="#"]').each(function() {
    this.onclick = function() {
        href = $(this).attr('href');
        if(href != document.location.hash) {
            $(href + ' form input').each(function() {
                $(this).val('');
            });
        }
    }
});

Ответы [ 3 ]

3 голосов
/ 23 ноября 2010

Если вы используете JavaScript для навигации, я бы посоветовал добавить проверку к этому.Но я предполагаю, что из вашего вопроса вы не согласны, что вместо этого вы используете простые ссылки только с якорями (например, <a href='#target1'>, <a href='#target2'>, ...).

Несколько вариантов:

Использование таймера

В этом случае в основном то, что вы хотите сделать, сводится к получению события при изменении привязки.Насколько я знаю, и насколько люди, отвечавшие на этот другой вопрос о StackOverflow в январе, знали, это можно сделать только с помощью таймера. (Изменить: Но см. Комментарий ide ниже, есть новое событие hashchange, которое мы скоро сможем использовать!) Например: 

(function() {
    var lastHash = window.location.hash;
    setTimeout(function() {
        var newHash = window.location.hash;
        if (newHash !== lastHash) {
            lastHash = newHash;
            // Trigger your target change stuff
        }
    }, 250);
})();

Это проверяет изменения каждую четверть секунды,Этого может быть недостаточно для вас, вы можете понизить 250, но остерегайтесь слишком частого запуска и замедления всего остального.

Но, как вы скажете ниже, это неэффективно.

Крюкclick событие ссылки

Поскольку вы уже используете JavaScript на странице, я бы рекомендовал вместо этого использовать обработчики для ваших ссылок.Если вы добавите имя класса или что-то к ним (держу пари, у них уже есть имя; я буду использовать «navlink» ниже), это легко настроить: 

var links, index, link;
links = document.getElementsByTagName('a');
for (index = 0; index < links.length; ++index) {
    link = links.item(index);
    if ((" " + link.className + " ").indexOf(" navlink ") >= 0) {
        hookEvent(link, 'click', clickHandler);
    }
}

function clickHandler() {
    // `this` will reference the element that was clicked
}

// The 'hook' function:
var hookEvent = (function() {
    var elm = document.createElement('a');

    function hookEventViaAttach(element, event, handler) {
        element.attachEvent("on" + event, handler);
    }
    function hookEventViaAddListener(element, event, handler) {
        element.addEventListener(event, handler, false);
    }
    function hookEventDOM0(element, event, handler) {
        element["on" + event.toLowerCase()] = handler;
    }

    if (elm.attachEvent) {
        return hookEventViaAttach;
    }
    if (elm.addEventListener) {
        return hookEventViaAddListener;
    }
    // I usually throw a failure here saying not supported, but if you want,
    // you can use the DOM0-style stuff.
    return hookEventDOM0;
})();

Много сложностей из-заВышесказанное исчезнет, ​​если вы используете библиотеку, такую ​​как jQuery , Прототип , YUI , Closure или любой из нескольких других .

Например, версия jQuery: 

$("a.navlink").click(clickHandler);
function clickHandler() {
    // `this` will reference the element that was clicked
}

Версия прототипа: 

$$("a.navlink").invoke('observe', 'click', clickHandler);
function clickHandler() {
    // `this` will reference the element that was clicked
}
0 голосов
/ 21 октября 2011

Может быть, вы можете просто код, как это 

function hashChangeEvent(){
    $(window.location.hash)//do something
}
window.onhashchange = hashChangeEvent;//when hash change
hashChangeEvent();//first load
0 голосов
/ 23 ноября 2010

Свойство onfocus возвращает код обработчика события onFocus для текущего элемента. 

event handling code = element.onfocus

Свойство onblur возвращает код обработчика события onBlur, если он есть, в текущем элементе.

element.onblur = function;

Пример: http://jsfiddle.net/g105b/cGHF7/

<html>

<head>
    <title>onblur event example</title>

    <script type="text/javascript">

    var elem = null;

    function initElement()
     {
     elem = document.getElementById("foo");
     // NOTE: doEvent(); or doEvent(param); will NOT work here.
     // Must be a reference to a function name, not a function call.
     elem.onblur = doEvent;
     };

    function doEvent()
     {
     elem.value = 'Bye-Bye';
     alert("onblur Event detected!")
     }
    </script>

    <style type="text/css">
    <!--
    #foo {
    border: solid blue 2px;
    }
    -->
    </style>
</head>

<body onload="initElement()";>
    <form>
    <input type="text" id="foo" value="Hello!" />
    </form>

    <p>Click on the above element to give it focus, then click outside the
    element.<br /> Reload the page from the NavBar.</p>

</body>
</html>
...