如何覆盖锚点元素的href目标，并删除我的点击去目标javascript中的其他错误？ [英] How to overwrite anchor element's href target and remove other bugs in my click-to-go-to-target javascript?

问题描述

我制作了一个网页。我想要implimenet的功能，滚动网页到href目标的菜单定位点的位置。我的代码如下

  var myscroll = {}; myscroll.list = document.getElementsByClassName（navbar-right）[0] .getElementsByTagName（li）; myscroll.bodypos = function getScrollY（）{scrOfY = 0; if（typeof（window.pageYOffset）=='number'）{// Netscape compliant scrOfY = window.pageYOffset; } else if（document.body&&（document.body.scrollLeft || document.body.scrollTop））{// DOM compliant scrOfY = document.body.scrollTop; } else if（document.documentElement&&（document.documentElement.scrollLeft || document.documentElement.scrollTop））{// IE6标准兼容模式scrOfY = document.documentElement.scrollTop; } return scrOfY; } function getScrollpos（idname）{return document.getElementById（idname）.offsetTop; } myscroll.point = []; myscroll.point [0] = getScrollpos（home）; myscroll.point [1] = getScrollpos（artists）; myscroll.point [2] = getScrollpos（songs）; myscroll.point [3] = getScrollpos（beats）; myscroll.point [4] = getScrollpos（contact）; function removeclass（）{for（var i = 0; i <5; i ++）{myscroll.list [i] .className =; }} window.addEventListener（'scroll'，function（e）{if（myscroll.bodypos（）> = myscroll.point [0]）{removeclass（）; myscroll.list [0] .className =active; （myscroll.bodypos（）> = myscroll.point [1]）{removeclass（）; myscroll.list [1] .className =active;} if [2]）{removeclass（）; myscroll.list [2] .className =active;} if（myscroll.bodypos（）> = myscroll.point [3]）{removeclass（）; myscroll.list [3] ] .className =active;} if（myscroll.bodypos（）> = myscroll.point [4]）{removeclass（）; myscroll.list [4] .className =active;}}）; for（var j = 0; j< 5; j ++）{（function（j）{myscroll.list [j] .anchor = document.getElementsByClassName（navbar-right）[0] .getElementsByTagName（li） [j] .getElementsByTagName（a）[0]; myscroll.list [j] .anchor.addEventListener（click，function（）{if（（document.body.scrollTop！= undefined）&& document.body.scrollTop< myscroll.point [j]））{var clr1 = setInterval（function（）{if（document.body.scrollTop< myscroll.point [j]  -  10）{document.body.scrollTop + = 3;} else {document.body.scrollTop = myscroll.point [j]; clearInterval（clr1）;}}，1）;} if（（document.documentElement.scrollTop！= undefined）& documentElement.scrollTop< myscroll.point [j]））{var clr2 = setInterval（function（）{if（document.documentElement.scrollTop< myscroll.point [j]  -  10）{document.documentElement.scrollTop + = 3 ;} else {document.documentElement.scrollTop = myscroll.point [j]; clearInterval（clr2）; }}，1）; } if（（document.body.scrollTop！= undefined）&&（document.body.scrollTop> myscroll.point [j]））{var clr3 = setInterval（function（）{if（document.body.scrollTop > = myscroll.point [j] + 4）{document.body.scrollTop  -  = 3;} else {document.body.scrollTop = myscroll.point [j]; clearInterval（clr3）;}}，1）; } if（（document.documentElement.scrollTop！= undefined）&&（document.documentElement.scrollTop> myscroll.point [j]））{var clr4 = setInterval（function（）{if（document.documentElement.scrollTop > = myscroll.point [j] + 4）{document.documentElement.scrollTop  -  = 3;} else {document.documentElement.scrollTop = myscroll.point [j]; clearInterval（clr4）;}}，1）; } alert（j）; }，true）; }（j））; }  

 ＃navbar，＃navbar a：link，＃navbar a：visited，＃navbar a：hover {position：fixed; color：red！important;}＃home {width：500px; height：500px;背景颜色：黑色; display：block;}＃artists {width：500px; height：500px;背景颜色：灰色display：block;}＃songs {width：500px; height：500px;背景颜色：黄色; display：block;}＃beats {width：500px; height：500px; background-color：blue; display：block;}＃contact {width：500px; height：500px; background-color：green; display：block;}  

 < div id =navbar class =navbar-collapse collapse> < ul class =nav navbar-nav navbar-right> < li class =active>< a href =＃>首页< / a> < / li> < li>< a href =＃artists>艺术家< / a> < / li> < li>< a href =＃songs>歌曲< / a> < / li> < li>< a href =＃beats>节拍< / a> < / li> < li>< a href =＃contact>联系人< / a> < / li> < / ul>< / div>< div id =home>< / div>< div id =artists>< / div>< div id =songs> < / div>< div id =beats>< / div>< div id =contact>< / div>   

因为这样的代码不会做它应该做的。如果我们删除菜单的锚标签的 href 属性，那么代码会按预期工作，但有一个错误。 href 标签的问题是，在 onclick 函数可以做任何事情之前，网页快速滚动到 href target 。 其他帖子表示使用onclick恢复为false会禁用 href 目标。问题是，我不使用 onclick ;我使用 addEventListener（click）。我尝试返回 false 和 true ，但没有任何作用。所以，

• 为什么返回 false 停止锚元素的href函数？现在我知道 preventDefault 会做我想要的。但我想知道如何通过返回false来实现相同的效果。

现在是bug。当我点击联系链接时，它向下滚动到页面底部，并保持固定。如果我向上滚动，那么页面会自动滚动到底部。

  var myscroll = {}; myscroll.list = document.getElementsByClassName（navbar-right）[0] .getElementsByTagName（li）; myscroll.bodypos = function getScrollY（）{scrOfY = 0; if（typeof（window.pageYOffset）=='number'）{// Netscape compliant scrOfY = window.pageYOffset; } else if（document.body&&（document.body.scrollLeft || document.body.scrollTop））{// DOM compliant scrOfY = document.body.scrollTop; } else if（document.documentElement&&（document.documentElement.scrollLeft || document.documentElement.scrollTop））{// IE6标准兼容模式scrOfY = document.documentElement.scrollTop; } return scrOfY; } function getScrollpos（idname）{return document.getElementById（idname）.offsetTop; } myscroll.point = []; myscroll.point [0] = getScrollpos（home）; myscroll.point [1] = getScrollpos（artists）; myscroll.point [2] = getScrollpos（songs）; myscroll.point [3] = getScrollpos（beats）; myscroll.point [4] = getScrollpos（contact）; function removeclass（）{for（var i = 0; i <5; i ++）{myscroll.list [i] .className =; }} window.addEventListener（'scroll'，function（e）{if（myscroll.bodypos（）> = myscroll.point [0]）{removeclass（）; myscroll.list [0] .className =active; （myscroll.bodypos（）> = myscroll.point [1]）{removeclass（）; myscroll.list [1] .className =active;} if [2]）{removeclass（）; myscroll.list [2] .className =active;} if（myscroll.bodypos（）> = myscroll.point [3]）{removeclass（）; myscroll.list [3] ] .className =active;} if（myscroll.bodypos（）> = myscroll.point [4]）{removeclass（）; myscroll.list [4] .className =active;}}）; for（var j = 0; j< 5; j ++）{（function（j）{myscroll.list [j] .anchor = document.getElementsByClassName（navbar-right）[0] .getElementsByTagName（li） [j] .getElementsByTagName（a）[0]; myscroll.list [j] .anchor.addEventListener（click，function（event）{event.preventDefault（）; if（（document.body.scrollTop！ undefined）&&（document.body.scrollTop< myscroll.point [j]））{var clr1 = setInterval（function（）{if（document.body.scrollTop< myscroll.point [j] {document.body.scrollTop + = 3;} else {document.body.scrollTop = myscroll.point [j]; clearInterval（clr1）;}}，1）;} if（（document.documentElement.scrollTop！= undefined） &&&&&&（document.documentElement.scrollTop< myscroll.point [j]））{var clr2 = setInterval（function（）{if（document.documentElement.scrollTop< myscroll.point [j] .documentElement.scrollTop + = 3; } else {document.documentElement.scrollTop = myscroll.point [j]; clearInterval（clr2）; }}，1）; } if（（document.body.scrollTop！= undefined）&&（document.body.scrollTop> myscroll.point [j]））{var clr3 = setInterval（function（）{if（document.body.scrollTop > = myscroll.point [j] + 4）{document.body.scrollTop  -  = 3;} else {document.body.scrollTop = myscroll.point [j]; clearInterval（clr3）;}}，1）; } if（（document.documentElement.scrollTop！= undefined）&&（document.documentElement.scrollTop> myscroll.point [j]））{var clr4 = setInterval（function（）{if（document.documentElement.scrollTop > = myscroll.point [j] + 4）{document.documentElement.scrollTop  -  = 3;} else {document.documentElement.scrollTop = myscroll.point [j]; clearInterval（clr4）;}}，1）; } alert（j）; }，true）; }（j））; }  

 ＃navbar，＃navbar a：link，＃navbar a：visited，＃navbar a：hover {position：fixed; color：red！important;}＃home {width：500px; height：500px;背景颜色：黑色; display; block;}＃artists {width：500px; height：500px;背景颜色：灰色display：block;}＃songs {width：500px; height：500px;背景颜色：黄色; display：block;}＃beats {width：500px; height：500px; background-color：blue; display：block;}＃contact {width：500px; height：500px; background-color：green; display：block;}  

 < div id =navbar class =navbar-collapse collapse> < ul class =nav navbar-nav navbar-right> < li class =active>< a href =＃>首页< / a> < / li> < li>< a href =＃artists>艺术家< / a> < / li> < li>< a href =＃songs>歌曲< / a> < / li> < li>< a href =＃beats>节拍< / a> < / li> < li>< a href =＃contact>联系人< / a> < / li> < / ul>< / div>< div id =home>< / div>< div id =artists>< / div>< div id =songs> < / div>< div id =beats>< / div>< div id =contact>< / div>   

• 如何清除此错误？

解决方案

在事件上使用 preventDefault（），停止点击要执行的事件。

  window.addEventListener（'scroll'，function ）{
 e.preventDefault（）; 
 ... 
  

你的事情在你的处理程序中，最后，手动更新 window.location 与事件目标的 href 属性。

EDIT

只有默认操作被阻止。要阻止它冒泡，有 event.stopPropagation（）。

对于事件的默认动作只是将 window.location 设置为事件目标的 href 属性

  window.location = e.target.getAttribute（'href'）; 
  

I've made a webpage. I want to implimenet the feature which scrolls the webpage to the location of href target of menu anchors. My code is as following

	var myscroll = {};
	myscroll.list = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li");

	myscroll.bodypos = function getScrollY() {
	  scrOfY = 0;
	  if (typeof(window.pageYOffset) == 'number') {
	    //Netscape compliant
	    scrOfY = window.pageYOffset;

	  } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
	    //DOM compliant
	    scrOfY = document.body.scrollTop;

	  } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
	    //IE6 standards compliant mode
	    scrOfY = document.documentElement.scrollTop;

	  }
	  return scrOfY;
	}

	function getScrollpos(idname) {
	  return document.getElementById(idname).offsetTop;
	}
	myscroll.point = [];
	myscroll.point[0] = getScrollpos("home");
	myscroll.point[1] = getScrollpos("artists");
	myscroll.point[2] = getScrollpos("songs");
	myscroll.point[3] = getScrollpos("beats");
	myscroll.point[4] = getScrollpos("contact");

	function removeclass() {
	  for (var i = 0; i < 5; i++) {
	    myscroll.list[i].className = "";
	  }
	}

	window.addEventListener('scroll', function(e) {

	  if (myscroll.bodypos() >= myscroll.point[0]) {
	    removeclass();
	    myscroll.list[0].className = "active";
	  }


	  if (myscroll.bodypos() >= myscroll.point[1]) {
	    removeclass();

	    myscroll.list[1].className = "active";
	  }

	  if (myscroll.bodypos() >= myscroll.point[2]) {
	    removeclass();
	    myscroll.list[2].className = "active";

	  }

	  if (myscroll.bodypos() >= myscroll.point[3]) {
	    removeclass();
	    myscroll.list[3].className = "active";

	  }

	  if (myscroll.bodypos() >= myscroll.point[4]) {
	    removeclass();
	    myscroll.list[4].className = "active";

	  }
	});

	for (var j = 0; j < 5; j++) {

	  (function(j) {

	    myscroll.list[j].anchor = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li")[j].getElementsByTagName("a")[0];
	    myscroll.list[j].anchor.addEventListener("click", function() {



	      if ((document.body.scrollTop != undefined) && (document.body.scrollTop < myscroll.point[j])) {

	        var clr1 = setInterval(function() {
	          if (document.body.scrollTop < myscroll.point[j] - 10) {
	            document.body.scrollTop += 3;
	          } else {
	            document.body.scrollTop = myscroll.point[j];
	            clearInterval(clr1);
	          }
	        }, 1);
	      }



	      if ((document.documentElement.scrollTop != undefined) && (document.documentElement.scrollTop < myscroll.point[j])) {

	        var clr2 = setInterval(function() {
	          if (document.documentElement.scrollTop < myscroll.point[j] - 10) {
	            document.documentElement.scrollTop += 3;
	          } else {
	            document.documentElement.scrollTop = myscroll.point[j];
	            clearInterval(clr2);
	          }
	        }, 1);
	      }


	      if ((document.body.scrollTop != undefined) && (document.body.scrollTop > myscroll.point[j])) {
	        var clr3 = setInterval(function() {
	          if (document.body.scrollTop >= myscroll.point[j] + 4) {
	            document.body.scrollTop -= 3;
	          } else {
	            document.body.scrollTop = myscroll.point[j];
	            clearInterval(clr3);
	          }

	        }, 1);
	      }

	      if ((document.documentElement.scrollTop != undefined) && (document.documentElement.scrollTop > myscroll.point[j])) {
	        var clr4 = setInterval(function() {
	          if (document.documentElement.scrollTop >= myscroll.point[j] + 4) {
	            document.documentElement.scrollTop -= 3;
	          } else {
	            document.documentElement.scrollTop = myscroll.point[j];
	            clearInterval(clr4);
	          }

	        }, 1);
	      }
	      alert(j);

	    }, true);

	  }(j));

	}

#navbar,
#navbar a:link,
#navbar a:visited,
#navbar a:hover {
  position: fixed;
  color: red !important;
}
#home {
  width: 500px;
  height: 500px;
  background-color: black;
  display: block;
}
#artists {
  width: 500px;
  height: 500px;
  background-color: gray;
  display: block;
}
#songs {
  width: 500px;
  height: 500px;
  background-color: yellow;
  display: block;
}
#beats {
  width: 500px;
  height: 500px;
  background-color: blue;
  display: block;
}
#contact {
  width: 500px;
  height: 500px;
  background-color: green;
  display: block;
}

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Home</a>
    </li>
    <li><a href="#artists">Artists</a>
    </li>
    <li><a href="#songs">Songs</a>
    </li>
    <li><a href="#beats">Beats</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
  </ul>
</div>

<div id="home"></div>
<div id="artists"></div>
<div id="songs"></div>
<div id="beats"></div>
<div id="contact"></div>

As such the code doesn't do what it is supposed to. If we remove href attributes of menu's anchor tags then the code works as expected but with one bug. The problem with the href tags is that before the onclick function could do anything the webpages scrolls quickly to the href target. Other posts say returntning false with onclick would disable the href target. The problem is that I am not using onclick; I am using addEventListener("click"). I tried returning both false and true but nothing worked. So,

• Why is it said returning false stops href function of anchor elements? Now I know that preventDefault will do what I want. But I want to know how to acheive the same by returning false.

Now comes the bug. When I click on contact link it scrolls down to the bottom of page and remains fixed there. If I scroll upwards then the page is automatically scrolled to bottom.

	var myscroll = {};
	myscroll.list = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li");

	myscroll.bodypos = function getScrollY() {
	  scrOfY = 0;
	  if (typeof(window.pageYOffset) == 'number') {
	    //Netscape compliant
	    scrOfY = window.pageYOffset;

	  } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
	    //DOM compliant
	    scrOfY = document.body.scrollTop;

	  } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
	    //IE6 standards compliant mode
	    scrOfY = document.documentElement.scrollTop;

	  }
	  return scrOfY;
	}

	function getScrollpos(idname) {
	  return document.getElementById(idname).offsetTop;
	}
	myscroll.point = [];
	myscroll.point[0] = getScrollpos("home");
	myscroll.point[1] = getScrollpos("artists");
	myscroll.point[2] = getScrollpos("songs");
	myscroll.point[3] = getScrollpos("beats");
	myscroll.point[4] = getScrollpos("contact");

	function removeclass() {
	  for (var i = 0; i < 5; i++) {
	    myscroll.list[i].className = "";
	  }
	}

	window.addEventListener('scroll', function(e) {

	  if (myscroll.bodypos() >= myscroll.point[0]) {
	    removeclass();
	    myscroll.list[0].className = "active";
	  }


	  if (myscroll.bodypos() >= myscroll.point[1]) {
	    removeclass();

	    myscroll.list[1].className = "active";
	  }

	  if (myscroll.bodypos() >= myscroll.point[2]) {
	    removeclass();
	    myscroll.list[2].className = "active";

	  }

	  if (myscroll.bodypos() >= myscroll.point[3]) {
	    removeclass();
	    myscroll.list[3].className = "active";

	  }

	  if (myscroll.bodypos() >= myscroll.point[4]) {
	    removeclass();
	    myscroll.list[4].className = "active";

	  }
	});

	for (var j = 0; j < 5; j++) {

	  (function(j) {

	    myscroll.list[j].anchor = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li")[j].getElementsByTagName("a")[0];
	    myscroll.list[j].anchor.addEventListener("click", function(event) {


          event.preventDefault();
	      if ((document.body.scrollTop != undefined) && (document.body.scrollTop < myscroll.point[j])) {

	        var clr1 = setInterval(function() {
	          if (document.body.scrollTop < myscroll.point[j] - 10) {
	            document.body.scrollTop += 3;
	          } else {
	            document.body.scrollTop = myscroll.point[j];
	            clearInterval(clr1);
	          }
	        }, 1);
	      }



	      if ((document.documentElement.scrollTop != undefined) && (document.documentElement.scrollTop < myscroll.point[j])) {

	        var clr2 = setInterval(function() {
	          if (document.documentElement.scrollTop < myscroll.point[j] - 10) {
	            document.documentElement.scrollTop += 3;
	          } else {
	            document.documentElement.scrollTop = myscroll.point[j];
	            clearInterval(clr2);
	          }
	        }, 1);
	      }


	      if ((document.body.scrollTop != undefined) && (document.body.scrollTop > myscroll.point[j])) {
	        var clr3 = setInterval(function() {
	          if (document.body.scrollTop >= myscroll.point[j] + 4) {
	            document.body.scrollTop -= 3;
	          } else {
	            document.body.scrollTop = myscroll.point[j];
	            clearInterval(clr3);
	          }

	        }, 1);
	      }

	      if ((document.documentElement.scrollTop != undefined) && (document.documentElement.scrollTop > myscroll.point[j])) {
	        var clr4 = setInterval(function() {
	          if (document.documentElement.scrollTop >= myscroll.point[j] + 4) {
	            document.documentElement.scrollTop -= 3;
	          } else {
	            document.documentElement.scrollTop = myscroll.point[j];
	            clearInterval(clr4);
	          }

	        }, 1);
	      }
	      alert(j);

	    }, true);

	  }(j));

	}

#navbar,
#navbar a:link,
#navbar a:visited,
#navbar a:hover {
  position: fixed;
  color: red !important;
}
#home {
  width: 500px;
  height: 500px;
  background-color: black;
  display: block;
}
#artists {
  width: 500px;
  height: 500px;
  background-color: gray;
  display: block;
}
#songs {
  width: 500px;
  height: 500px;
  background-color: yellow;
  display: block;
}
#beats {
  width: 500px;
  height: 500px;
  background-color: blue;
  display: block;
}
#contact {
  width: 500px;
  height: 500px;
  background-color: green;
  display: block;
}

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Home</a>
    </li>
    <li><a href="#artists">Artists</a>
    </li>
    <li><a href="#songs">Songs</a>
    </li>
    <li><a href="#beats">Beats</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
  </ul>
</div>

<div id="home"></div>
<div id="artists"></div>
<div id="songs"></div>
<div id="beats"></div>
<div id="contact"></div>

• How do I remove this bug?

解决方案

Use preventDefault() on the event, to stop the default for the click event to be executed.

window.addEventListener('scroll', function(e) {
    e.preventDefault();
    ...

Then do your thing in your handler, and at the end, manually update the window.location with the value of the event target's href attribute.

EDIT

RE the comment: your event still bubbles, only the default action is prevented. To stop it from bubbling up, there is event.stopPropagation().

The default action for you event is simply to set the window.location to the value of your event target's href attribute

window.location = e.target.getAttribute('href');

这篇关于如何覆盖锚点元素的href目标，并删除我的点击去目标javascript中的其他错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！