点击<a href="#">阻止自动跳转到顶部方法
最近开发web项目,遇到一个问题 ,就是在<a>标签加href="#",并增加onclick事件,页面会自动在点击该标签绑定的元素时,自动跳转到页面顶部,在网上寻求了一番解决办法后,总结下来有两种比较常用的解决办法:
(1):<a href="###" onclick="">
通常我们的写法是href=“#”,默认的锚是#top 也就是网页的上端,所以浏览器会在点击事件后跳转到顶部。此时用“##”或者“###”等都可以实现不回到页面顶部,为什么呢,因为浏览器不认识啊,就默认不处理了。即此时只会响应点击事件。
(2)<a href="javascript:void(0)" onclick="">
这种方式也可以避免回到顶部。我们可以使用void操作符指定超级链接,如javascript:void(document.form.submit())。表达式会被计算但是不会在当前文档处装入任何内容,void(0)计算为0,但在JavaScript上没有任何效果,也就是说 <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一样的。 关键是只要知道void是javascipt
自身的操作符,它表示的是只执行表达式,但没有返回值! 如<a href="javascript:void(document.form.submit())">此时点击事件就会提交一个表单。
javascript:void(0)要慎用:要执行某些处理,但是不整体刷新页面的情况下,可以使用void(0),但是在需要对页面进行refresh的情况下,那就要仔细了。其实我们可以这样用<a href="javascript:void(document.form.submit())">,这句话会进行一次submit操作。那什么情况下用void(0)比较多呢,无刷新,当然是Ajax了,看一下Ajax的web页面的话,一般都会看到有很多的void(0),所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。
点击<a href="#">阻止自动跳转到顶部方法的更多相关文章
- 用户点击确认登录,自动跳转下面地址得到code
PHP获取微信openid 简单教程 WEB 2014年10月29日 10868浏览 6评论 获取code https://open.weixin.qq.com/connect/oauth2/ ...
- 35.HTML--网页自动跳转 5种方法
网页自动跳转 5种方法 利用HTML标记(META中的REFRESH属性) 用HTML标记,就是用META的REFRESH标记,举例如下: <meta http-equiv=refresh co ...
- window.loaction.href 不自动跳转的问题
window.location.href无效/不跳转的原因分析 1.源代码: <a href="javascript:void(0);" onclick="mo ...
- QQ和微信点击链接或扫描自动跳转外部浏览器
微信上进行的网页宣传.游戏传播.APP下载各类活动很多,但是各位朋友肯定经常会遇到一些特殊需求,网页需要在手机默认浏览器打开而不是微信内置浏览器.这个问题怎么解决呢? 另一种情况是你的网址被恶意举报被 ...
- flask配置选项中的TRAP_HTTP_EXCEPTIONS会阻止自动跳转
参考:http://www.pythondoc.com/flask/config.html Flask 对象的 config 属性. 这是Flask自身放置特定配置的地方,同时也是flask扩展模块放 ...
- 解决Jupyter notebook安装后不自动跳转网页的方法
在安装完Jupyter notebook后,有童鞋说出现了各种不友好的问题,鉴于此情况,个人先随手写出以下三种情况,并给出解决方法: 题外建议:请使用谷歌浏览器为默认浏览器 一.对于弹不出浏览器的解决 ...
- 微信小程序页面3秒后自动跳转
setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种: setTimeout(function () { // wx.r ...
- 点击<a>标签,禁止页面自动跳到顶部的解决办法
最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法.网上的 ...
- 黄聪:如何阻止iframe里引用的网页自动跳转
今天做了个网页,要在网页里设置一个iframe,然后套用其他的网站.使用http://luanqi-cat.blogbus.com 这个网址的时候,出现了莫名其妙的问题,我的网页居然会强制自动跳转到这 ...
随机推荐
- helm安装异常解决方案
问题1:helm version正常 helm list 异常报错如下 解决方法: [root@MASTER1 ~]# helm init --service-account tiller --til ...
- 松软科技课堂:jQuery 语法
jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...
- 题解【洛谷P2668】[NOIP2015]斗地主
题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的 $ A $ 到 $ K $ 加上大小王的共 $ 54 $ 张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据 ...
- D. Mahmoud and Ehab and another array construction task 因子分界模板+贪心+数学
D. Mahmoud and Ehab and another array construction task 因子分解模板 题意 给出一个原序列a 找出一个字典序大于a的序列b,使得任意 \(i!= ...
- mongo shell远程连接使用数据库
mongo mydb --username user1 --host --password --username 用户名 --host 连接ip --port 连接端口号 --password 密码 ...
- dbShape
Usage: dbShape [-help] [-d] [-step <step>] [-output {polygon rect hrect area}] <shapeList&g ...
- MNIST 数据集
mnist 数据集:包含 7 万张黑底白字手写数字图片,其中 55000 张为训练集,5000 张为验证集,10000 张为测试集.每张图片大小为 28*28 像素,图片中纯黑色像素值为 0,纯白色像 ...
- gVim for windows 简单使用教程
vim 是一个具有很多命令的功能非常强大的编辑器.限于篇幅,在本教程当中 就不详细介绍了.本教程的设计目标是讲述一些必要的基本命令,而掌握好这 些命令,您就能够很容易将vim当作一个通用的 ...
- PHP导出身份证号科学计数法
最近在做PHP的数据导入和导出,到处身份证号的时候,直接变成了科学计算法,找了一个很简单的方法就是这样 $obj= " ".$v['idcard']; 但是这样有空格啊,网上搜了一 ...
- VMware 搭建linux虚拟机环境
1.任务管理器-服务 确认VMware服务是否启动 2.VMware生成网关地址 编辑--虚拟网络编辑器 VMnet8 NAT设置子网IP,子网掩码,网关 3.windows网络--更改适配器设置-- ...