阻止a标签默认行为的几种简单方法
- a 标签的 href 标签属性的属性值为以
#
开头 且#
后有它非空格字符 的 字符串,#是标签内置的一个方法,点击 a 标签不会触发加载资源,但回返回到页面顶<a href="##"></a> <a href="#任何字符串"></a>
- a 标签的 href 标签属性的属性值为以
javascript:
开头 且javascript:
后面的代码没有返回任何东西 或者 返回为undefined
、null
、void
或者 void表达式<a href="javascript:"></a> <a href="javascript:undefined"></a> <a href="javascript:null"></a> <a href="javascript:void"></a> <a href="javascript:void()"></a> <a href="javascript:void(0)" ></a>
- 事件处理函数的工作机制中,在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后,
如果相应JavaScript代码返回true,onclick事件处理函数就会认为这个链接呗点击了,同样的若返回false即会认为链接
当点击a标签时,JavaScript代码返回值为false,故此链接默认行为未被触发。<a href="http://www.baidu.com" οnclick=" myjs(); return false; "> Click Me </a> <a href="http://www.baidu.com" οnclick=" return false; "> Click Me </a>
preventDefault()阻止事件的默认行为但不支持IE,所以在IE中使用returnValue阻止事件默认行为
<a href="http://www.baidu.com" id="test"> Click Me </a>
<script type="text/javascript">
var test = document.getElementById('test');
function stopDefault(e) {
if (e && e.preventDefault)
e.preventDefault();
else
window.event.returnValue = false;
}
test.onclick = function (e) {
stopDefault(e);
}
</script>
href 与 onclick 的区别
在Javascript中void是一个操作符,该操作符指定要计算一个表达式,但是不返回值,void 操作符用法格式如下:
javascript:void(expression)
javascript:void expression
expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯
下面代码创建了一个超链接,当用户点击以后不会发生任何事。当用点击户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果
<a href="javascript:void(0);">单击此处什么也不会发生</a>
下面的代码创建了一个超级链接,用户单击时会提交表单
<a href="javascript:void(document.form.submit());">单此处提交表单</a>
下面代码则执行了subgo() 函数,在这里,javascript:void(0),没起实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。
<a href="javascript:void(0);" onclick="subgo();">点我</a>
<a href="#" onclick="subgo();">点我</a>与<a href="javascript:void(0);" onclick="subgo();">点我</a>的区别
实际上 # 包含了一个位置信息,默认的锚是#top ,也就是网页的上端 ,而 javascript:void(0); 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0)
如果链接中同时有,href 属性函数和 onclick 事件函数,那到底执行那个呢?
<a href="javascript:subgo2();" onclick="subgo();">点我</a>
链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接);
假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值,一般是这样写οnclick="xxx();return false;" 。
<a href="javascript:subgo2();" onclick="subgo(); return false;">点我</a>
如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动;
如果在链接的 href 属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替;
js返回上一页的几种实现方法
window.history.go(-1); //返回上一页
window.history.back(); //返回上一页
//如果要强行刷新的话就是:window.history.back();location.reload();
window.location.go(-1); //刷新上一页
使用history.length判断是否有上一页面,如果没有就返回到指定页面,一般是返回到首页
function goBack(){
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){ // IE
if(history.length > 0){
window.history.go( -1 );
}else{
window.location.href = "/";
}
}else{ //非IE浏览器
if (navigator.userAgent.indexOf('Firefox') >= 0 ||
navigator.userAgent.indexOf('Opera') >= 0 ||
navigator.userAgent.indexOf('Safari') >= 0 ||
navigator.userAgent.indexOf('Chrome') >= 0 ||
navigator.userAgent.indexOf('WebKit') >= 0){
if(window.history.length > 1){
window.history.go( -1 );
}else{
window.location.href = "/";
}
}else{ //未知的浏览器
window.history.go( -1 );
}
}
}