设置location.hash时防止默认行为

时间:2012-11-11 04:43:20

标签: javascript

当我这样做时,

location.hash = "test"

更新了网址,并且该网页位于具有该ID的元素上。

有没有办法阻止页面进入该元素?

2 个答案:

答案 0 :(得分:3)

解决方案

您无法阻止此行为,但您可以通过暂时隐藏目标来欺骗它,例如。像那样(它与jQuery无关):

// obtain "target" DOM (not jQuery) element and do this:
var original.id = target.id; // save original ID
target.id = null; // set target's ID
location.hash = 'test'; // issue location.hash change
target.id = original_id; // set ID to original value

广义解决方案

或更一般的例子:

// make target_hash set to a hash you want to not lead you to page section and:
var element = document.getElementById(target_hash); // find element by ID
var original_id = element.id; // save original ID
location.hash = target_hash; // previously defined by you (eg. 'test')
element.id = original_id; // reset ID

演示/证明

实例可以如下,在通过jQuery附加的事件处理程序中(这里演示:http://jsfiddle.net/DaZfH/):

some_link.on('click', function(event){
    event.preventDefault();
    var target = document.getElementById('target');
    var original_id = target.id;
    target.id = null; // unset ID
    location.hash = 'target';
    target.id = original_id;
});

声明

但其他人确实是对的:将您带到文档中的正确位置是正确的行为。如果你正在做我提到过的事情,那么你的解决方案非常苛刻,绝对有更好的方法。

答案 1 :(得分:0)

  

有没有办法阻止页面进入该元素

是。虽然hashchange事件不可取消,但您可以像这样重置其不需要的行为。



var popY,
    popX;

//When location.hash is changed, popstate is the first event to fire 
//Use this event to record current state

window.addEventListener('popstate', popstateHandler);
function popstateHandler() {
  popY = window.scrollY;
  popX = window.scrollX;
}

//Reset scroll position with recorded values when hashchange fires (after page is scrolled)

window.addEventListener('hashchange', hashchangeHandler);
function hashchangeHandler() {
  window.scrollTo(popX, popY);
}




这是它的基础。您可能希望为IE做一些校对,并实现您执行此操作的原因:动画滚动,活动等等。

用于scrollY的polyfill,scrollX:



if(!('scrollY' in window)) {
    Object.defineProperty(window, 'scrollY', {
        get: function () {
            return window.pageYOffset
        }
    });
    Object.defineProperty(window, 'scrollX', {
        get: function () {
            return window.pageXOffset
        }
    })
}