分享程序员开发的那些事...
更新时间：2023-09-02 22:24:10
在事件上使用 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,
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>
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');