什么是javascript / jQuery解决方案,以防止在点击链接时滚动到顶部用于内部javascript功能 inner()
?
解决方案应该在内部功能中。是否有可能不将事件作为参数传递?其他解决方案在下面的代码中提供了解释,但没有人在inner()
中作为解决方案。代码如下。 请滚动至最低链接。 inner()
功能中的最低链接需要解决方案。
以下是jsFiddle code:
HTML:
<div>
<p><a href="#">it jumps</a></p>
<p><a href="#">it jumps</a></p>
<p><a href="#">it jumps</a></p>
<p><a href="#">it jumps</a></p>
<p><a href="javascript:void(0);" id="jsSolution">no jumps - jsSolution</a></p>
<p><a href="#" id="jqSolution">no jumps - jqSolution</a></p>
<p><a href="#!">no jumps - html Solution</a></p>
<p><a href="#" id="problem">how to prevent this from jumping - javascript solution in the add() function</a></p>
</div>
的javascript:
$(function(){
function inner(){
//prevent from scrolling to top here - solution is needed here;
return 4;
}
function add() {
alert('how to prevent jumping to top in the add function');
var counter = 0;
var res=inner();
alert(res);//4
//some code goes here
//and here
//this doesn't work e.preventDefault();
return counter;
}
$('#jqSolution').click(function(e) {
//return false;
e.preventDefault(); // same thing as above
});
$('#problem').click(function(e) {
add();
});
});
包含jQuery库。
的CSS:
div{
border:1px solid red;
width:200px;
}
p{
padding:50px;
}
谢谢。
P.S。链接href =&#34;#&#34;无法更改,javascript代码不应被销毁。
答案 0 :(得分:2)
我认为我没有完全找到你,但你可以使用preventDefault,这样就不会执行锚标记的默认操作。 Js对你的小提琴进行了一些改动,使其成功: -
http://jsfiddle.net/sahilbatla/guxdku9w/2/
$(function(){
function inner(e){
e.preventDefault();
//prevent from scrolling to top here - solution is needed here;
return 4;
}
function add(e) {
alert('how to prevent jumping to top in the add function');
var counter = 0;
var res=inner(e);
alert(res);//4
return counter;
}
$('#jqSolution').click(function(e) {
//return false; // prevent default click action from happening
e.preventDefault(); // same thing as above
});
$('#problem').click(function(e) {
add(e);
});
});