Question

我正在使用CSS3 :target伪选择器来创建页内导航，而无需重新加载页面。这非常有效！

但是我有一个问题，我需要在页面目标时重置页面中的表单，我怎么知道一个元素是否以javascript为目标？与element.ontarget = function();

一样

或者类似于element.ondisplaychange - ＆gt; 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;
    }
}

更新

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

Answer 1

如果您使用JavaScript进行导航，我建议您只需添加支票即可。但是我猜你的问题不是，你只是使用只有锚点的简单链接（例如，<a href='#target1'>，<a href='#target2'>，...）。

有两种选择：

使用计时器

在这种情况下，基本上你想要做的就归结为当锚更改时接收事件。据我所知，就1月份回答this other question on 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，Prototype，YUI，Closure或any of several others这样的库，则上述内容的许多复杂情况都会消失。

例如，jQuery版本：

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

Prototype版本：

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

Answer 2

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>

Answer 3

也许你只能像这样编码

function hashChangeEvent(){
    $(window.location.hash)//do something
}
window.onhashchange = hashChangeEvent;//when hash change
hashChangeEvent();//first load

做点什么：使用javascript定位

3 个答案:

使用计时器

挂钩链接的`click`事件

做点什么：使用javascript定位

3 个答案:

使用计时器

挂钩链接的click事件

挂钩链接的`click`事件