最近开发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="#">阻止自动跳转到顶部方法的更多相关文章

  1. 用户点击确认登录,自动跳转下面地址得到code

    PHP获取微信openid 简单教程 WEB   2014年10月29日  10868浏览  6评论 获取code https://open.weixin.qq.com/connect/oauth2/ ...

  2. 35.HTML--网页自动跳转 5种方法

    网页自动跳转 5种方法 利用HTML标记(META中的REFRESH属性) 用HTML标记,就是用META的REFRESH标记,举例如下: <meta http-equiv=refresh co ...

  3. window.loaction.href 不自动跳转的问题

    window.location.href无效/不跳转的原因分析   1.源代码: <a href="javascript:void(0);" onclick="mo ...

  4. QQ和微信点击链接或扫描自动跳转外部浏览器

    微信上进行的网页宣传.游戏传播.APP下载各类活动很多,但是各位朋友肯定经常会遇到一些特殊需求,网页需要在手机默认浏览器打开而不是微信内置浏览器.这个问题怎么解决呢? 另一种情况是你的网址被恶意举报被 ...

  5. flask配置选项中的TRAP_HTTP_EXCEPTIONS会阻止自动跳转

    参考:http://www.pythondoc.com/flask/config.html Flask 对象的 config 属性. 这是Flask自身放置特定配置的地方,同时也是flask扩展模块放 ...

  6. 解决Jupyter notebook安装后不自动跳转网页的方法

    在安装完Jupyter notebook后,有童鞋说出现了各种不友好的问题,鉴于此情况,个人先随手写出以下三种情况,并给出解决方法: 题外建议:请使用谷歌浏览器为默认浏览器 一.对于弹不出浏览器的解决 ...

  7. 微信小程序页面3秒后自动跳转

    setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种:   setTimeout(function () { // wx.r ...

  8. 点击<a>标签,禁止页面自动跳到顶部的解决办法

       最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法.网上的 ...

  9. 黄聪:如何阻止iframe里引用的网页自动跳转

    今天做了个网页,要在网页里设置一个iframe,然后套用其他的网站.使用http://luanqi-cat.blogbus.com 这个网址的时候,出现了莫名其妙的问题,我的网页居然会强制自动跳转到这 ...

随机推荐

  1. Centos6.5安装Nmap、tcpdump、mysql、tomcat、靶场WAVSEP

    nmap安装 输入命令如下: yum install nmap 安装完成后,输入nmap -h看是否安装成功. 安装tcpdump 安装tcpdump必须的库: yum install flex yu ...

  2. No serializer found for class org.hibernate.proxy.pojo.bytebuddy.ByteBuddyInterceptor

    使用jpa做增删改查的时候出现了这个异常,原因是转化成json的时候,fasterxml.jackson将对象转换为json报错,发现有字段为null 解决方案:实体类上添加 @JsonIgnoreP ...

  3. npx工具

    参考文章:阮一峰的网络日志 - npx 使用教程 npx的作用 1.调用项目模块 即node_modules目录下的模块,而不用加上相对路径 $ npx mocha --version 原本应该是这样 ...

  4. [转] UML中的六大关系

    UML中的六大关系 转自:https://www.cnblogs.com/hoojo/p/uml_design.html 在UML类图中,常见的有以下几种关系: 泛化(Generalization), ...

  5. 自制yum源离线安装ansible

    适应场景 在实际生产环境中,服务器往往是不能访问互联网,如果简单的下载ansible源码安装,会碰到缺少各种依赖包的问题,因此,推荐制作yum源,然后使用yum安装ansible. 实验环境 模拟可以 ...

  6. servlet中的“/”代表当前项目,html中的“/”代表当前服务器

    servlet中重定向或请求转发的路径如果用“/”开头,代表当前项目下的路径,浏览器转发这条路径时会自动加上当前项目的路径前缀,如果这个路径不是以“/”开头,那么代表这个路径和当前所在servlet的 ...

  7. CentOS 7 1810版本不能使用yum 命令

    使用yum install httpd 命令安装Apache 提示错误 annot find a valid baseurl for repobase7x86_64 解决方法: 进入 ls命令寻找类似 ...

  8. pyppeteer硬钢掉淘宝登入的滑块验证

    完整代码我也不好公布,我可以给你们思路,以及部分代码动动脑子看看文档应该也能搞定 一.初始化Chromium浏览器相关属性 browser = await pyppeteer.launch({'hea ...

  9. 利用ansible-playbook一键部署ELK(ElasticSearch,logstash and kibana)

    一.部署前环境介绍: es集群5台(es01,es02,es03,es04,es05),logstash服务器1台(logstash2),kibana服务器1台(kibana2),模拟apache服务 ...

  10. The Reason Why Cosmetic Airless Bottles Are Widely Used

    The contents of the Cosmetic Airless Bottles    can be isolated from the air, to prevent the product ...