html js button点击后不跳转
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html js button点击后不跳转相关的知识，希望对你有一定的参考价值。
html部分
<div class="input">
<input placeholder="What do you want?" autocomplete="off" type="text" class="form-control" name="s" id="keyWord">
<button class="search-btn" type="button" id="btnSouba"></button>
</div>
已经在页面调用 <script src="/search.js" type="text/javascript"></script>
js部分
$(function ()
$("#keyWord").keydown(function (event)
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 27) // 按 Esc
//要做的事情
if (e && e.keyCode == 113) // 按 F2
//要做的事情
if (e && e.keyCode == 13) // enter 键
//要做的事情
LoadKey(encodeURIComponent(validateStr($("#keyWord").val().replace(/[ ]/g, ""))));
)
$("#btnSouba").click(function ()
LoadKey(encodeURIComponent(validateStr($("#keyWord").val().replace(/[ ]/g, ""))));
)
)
//过滤危险字符
function validateStr(str)
str = str.replace(/$/gi, "");
str = str.replace(/</gi, "《");
str = str.replace(/>/gi, "》");
//str=str.replace(/ /gi,"");
str = str.replace(/%/gi, "");
str = str.replace(/--/gi, "");
str = str.replace(/;/gi, "");
str = str.replace(/\./gi, "");
str = str.replace(/\*/gi, "");
str = str.replace(/\&/gi, "");
str = str.replace(/\-/gi, "");
str = str.replace(/\//gi, "");
return str;
function LoadKey(keyWord)
$.ajax(
url: "/Handler/AddToKeyWord.ashx",
data: "KeyWord=" + keyWord,
dataType: "json",
type: "post",
contentType: "application/x-www-form-urlencoded; charset=utf-8"
);
window.location.href = "/list/" + keyWord + "/1";
<!DOCTYPE HTML>
<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
jQuery (function ($)
var kw = $ ("#keyWord");
kw.keydown (function (e)
var keycode = e.keyCode;
if (keycode == 27)
// 按 Esc
//要做的事情
else if (keycode == 113)
// 按 F2
//要做的事情
else if (keycode == 13)
// enter 键
//要做的事情
LoadKey (encodeURIComponent (validateStr (kw.val ().replace (/\\s/g, ""))));
return false;
);
$ ("#btnSouba").click (function ()
LoadKey (encodeURIComponent (validateStr (kw.val ().replace (/[ ]/g, ""))));
);
);
function validateStr (str)
return str.replace (/[\\$\\<\\>\\%\\;\\.\\*\\&\\-\\/]/g, "");
function LoadKey (keyWord)
$.ajax (
url : "/Handler/AddToKeyWord.ashx",
data : "KeyWord=" + keyWord,
dataType : "json",
type : "post",
// async : false,
contentType : "application/x-www-form-urlencoded; charset=utf-8",
success : function ()
window.location.href = "/list/" + keyWord + "/1";
,
error : function ()
alert ('error');
);
</script>
</head>
<body>
<div class="input">
<input placeholder="What do you want?" autocomplete="off" type="text" class="form-control" name="s" id="keyWord">
<button class="search-btn" type="button" id="btnSouba"></button>
</div>
</body>
</html> 参考技术A html中js用button传值并跳转到一个新的页面，我们首先需要的获取到button这个对象，还有button要传的值，然后在通过去Location加上地址链接就行了，这里我写段代码：
<!doctype html>
<html>
<head>
</head>
<script>
var obut = document.getElmentById('but');
Location:'地址链接'; //location的链接地址
alert(obut .value); //获取到button的值
</script>
<body>
<input type='button' value='确认' id='but'>
点击超链接不跳转,不刷新页面
本文转载自：http://heisetoufa.iteye.com/blog/1766957
让超链接点击后不跳转,可以用href = "#"，但是这个#就会锚点到页面最上边
点击链接后不跳转可以设置成
1.<a href="javascript:void(0);" >javascript:void(0);</a>
2.<a href="javascript:;" >javascript:;</a>
3.<a href="" onclick="return false;">return false;</a>
4.<a href="#" onclick="return false;">return false;</a>
5.<a href="##" >##</a>
6.<a href="####" >####</a>
7.<a href="#all" >#all</a>
如果想点击超链接调用js方法的话可以设置成
1.<a href="javascript:void(0)" onclick="jsFun()">jsFun</a>
2.<a href="#" onclick="jsFun();return false;">jsFun();return false;</a>
3.<a href="#" onclick="alert(1);event.returnValue=false;">alert(1);event.returnValue=false;</a>
1.javascript:void(0)不建议使用
2.链接（href）直接使用javascript:void(0)在IE中可能会引起一些问题，比如：造成gif动画停止播放等，所以，最安全的办法还 是使用“####”。为防止点击链接后跳转到页首，onclick事件return false即可。
3.如果仅仅是想鼠标移过，变成手形，可以使用
<span style="cursor:pointer" onclick="jsFun()">手型!</span>
以上是关于html js button点击后不跳转的主要内容，如果未能解决你的问题，请参考以下文章