给html超链接设置事件不使用href来完成跳

有的时候，我们需要使用<a>这个超级链接，而又不使用href来完成跳转，而是如：<a href="#" onClick="fun()"></a>这种方式。这样，就不会让页面跳转。但是同时也会带来一些负面的问题，比如页面的title变成了“#”，或者页面出现了滚动条什么的。这是因为在执行完了onClick事件后，<a>又去跳转href所指向的地址了，而”#“是个锚点，默认是网页的页首，所以会带来上边所说的问题。

解决方法有以下两种：

1、onClick事件添加return false语句，例如：


代码如下:

<a href="#" onClick="fun(); return false;">点击</a>

2、用void(0)的方式代替#，例如：


代码如下:

<a href="javascript:void(0)" onclick="fun()">点击</a>

赞 (0)

相关推荐

  • 给html超链接设置事件不使用href来完成跳

    有的时候,我们需要使用<a>这个超级链接,而又不使用href来完成跳转,而是如:<a href="#" onClick="fun()"></a>这种方式.这样,就不会让页面跳转.但是同时也会带来一些负面的问题,比如页面的title变成了"#",或者页面出现了滚动条什么的.这是因为在执行完了onClick事件后,<a>又去跳转href所指向的地址了,而"#"是个锚点,默认是网页的页

  • javascript处理a标签超链接默认事件的方法

    本文实例讲述了javascript处理a标签超链接默认事件的方法.分享给大家供大家参考.具体分析如下: 有时需要在a标签上添加click事件,并且跳转前处理一些事务,故需要做一些处理:通常前端会给出一个<a href="#">link</a>来代表这个行为,有些还会这样写<a href="###">link</a>或者<a href="javascript:void(0);">link&

  • C++设置事件通知线程工作的方法

    本文实例讲述了C++设置事件通知线程工作的方法,其中主线程通过将事件状态设置为"受信"来通知工作线程工作.具体实现方法如下: 复制代码 代码如下: // eventDemo.cpp : 定义控制台应用程序的入口点.  //    #include "stdafx.h"  #include <Windows.h>  #include <process.h>  HANDLE g_event;    UINT __stdcall ThreadPro

  • 深入理解在JS中通过四种设置事件处理程序的方法

    所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量.但是HTML标签属性注册处理程序就是一个例外.看下面四种方式: 第一种方式(HTML标签属性): <input type="button" id="btn1" value="测试" onclick="alert(this.id);" /> 上面的代码是通过设置HTML标签属性为给

  • Android中RecyclerView点击Item设置事件

    Android中RecyclerView点击Item设置事件

    在上一篇Android RecylerView入门教程中提到,RecyclerView不再负责Item视图的布局及显示,所以RecyclerView也没有为Item开放OnItemClick等点击事件,这就需要开发者自己实现.博客最下面有Demo程序运行动画. 奉上Demo的Github链接. 在调研过程中,发现有同学修改RecyclerView源码来实现Item的点击监听,但认为这不是一个优雅的解决方案,最终决定在RecyclerView.ViewHolder上做文章. 思路是:因为ViewH

  • window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法

    错误写法 , 主要是在 href="#"这里 复制代码 代码如下: 错误写法 , 主要是在 href="#"这里 脚本如下 复制代码 代码如下: if (data == "发送成功") {                    alert(data);                    window.location.href = window.location.href;                } 正确的写法  href 后面跟一个

  • window.location.href IE下跳转失效的解决方法

    复制代码 代码如下: <a href="javascript:void(0)" >GoNext</a> $("a").click(function(){ window.location.href = "xxx.html"; }) 代码如上,在IE下,特别是在IE6中,点击超链接之后,浏览器并没有发生跳转行为. 原因可能是因为在href中的javascript:void(0)阻止的事件行为,解决方法如下: 1.在onclic

  • 微信浏览器左上角返回按钮监听的实现

    问题描述1: 微信开发的时候,在公众号菜单中打开一个H5页面(如:个人中心),在这个页面上的一些操作,经过多次跳转后,点击左上角的返回按钮,发现会原封不动的返回至上一级页面. 即 公众号菜单->A->B->C,点击返回后,返回了B(且无刷新),目的是要在C直接跳转至A(公众号菜单->A->B->C,C->A),虽然可以在C上添加按钮之类的操作进行跳转(公众号菜单->A->B->C->A),但当点击左上角返回按钮后,依然是会返回C页面,并且,

  • 浅析JavaScript事件和方法

    浅析JavaScript事件和方法

    单击一个超链接触发事件 1.用a标签的onclick <a href="#" onclick="js代码"> 这种写法呢,存在一种弊端,就是点击后会刷新一次页面,回到页面顶端. 想不刷新如何做的呢? 复制代码 代码如下: <a href="javascript:void(0)" onclick="js代码"> 2.#与javascript:void(0)的区别 超链接为"死链"时,使

  • 四种参数传递的形式——URL，超链接，js，form表单

    什么时候用GET,  查,删 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>&l

随机推荐