`
alert_mm
  • 浏览: 167022 次
  • 性别: Icon_minigender_2
  • 来自: 厦门
社区版块
存档分类
最新评论

<a>标签响应onclick事件,防止页面跳动方法总结

阅读更多

     最近在点击一个a链接时经常发现,如果有垂直滚动条的话页面经常跳到顶端,于是google了一下,知道了为什么,也找到了几个解决办法。

     总结一下,如果在实际应用中确实是要用到<a>标签来响应onclick事件的,
 
那么就建议使用下面三种方法
  1.<a href="javascript:void(0)" onclick="doSomething()">test</a>
  2.<a href="" onclick="doSomething();return false">test</a>
(推荐)
  3.<a href="
" onclick="doSomething();event.returnValue=false">test</a>

分享到:
评论
6 楼 FengShen_Xia 2008-12-23  
试验了一下,不错。谢谢分享
5 楼 alert_mm 2008-12-22  
chris_in 写道

这应该是由于触发了浏览器的默认行为而引起的。建议第三点 event.returnValue=false 就是在阻止浏览器的默认行为。 当然,这样写只对IE浏览器有用 可以写一个比较通用的 阻止浏览器默认行为的方法: &nbsp; function stopDefault(evt){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(e&amp;&amp;e.preventDefault()){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.e.preventDefault(); &nbsp;&nbsp;&nbsp; }else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.event.returnValue=false; &nbsp;&nbsp;&nbsp; } } 这样既可跨浏览器使用。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fromro JavaScript Techniques

学习了
4 楼 chris_in 2008-12-21  
这应该是由于触发了浏览器的默认行为而引起的。建议第三点 event.returnValue=false 就是在阻止浏览器的默认行为。
当然,这样写只对IE浏览器有用

可以写一个比较通用的 阻止浏览器默认行为的方法:

  function stopDefault(evt){
      if(e&&e.preventDefault()){
          e.e.preventDefault();
    }else{
          window.event.returnValue=false;
    }
}

这样既可跨浏览器使用。
                             fromro JavaScript Techniques
3 楼 alert_mm 2008-12-19  
atian25 写道

http://lifesinger.org/blog/?p=856


讲得很清楚,非常感谢
2 楼 atian25 2008-12-19  
#是锚点,自然会到顶部
1 楼 atian25 2008-12-19  
http://lifesinger.org/blog/?p=856

相关推荐

    点击选择框出现下拉模块信息,点击信息到选择框中

    点击选择框出现下拉&lt;div class="close" id="close"&gt;&lt;a onclick="document.getElementById('titt').style.visibility='hidden'"&gt;选择&lt;/a&gt;&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;ul&gt; &lt;li&gt;&lt;a onclick="addValue('el...

    A标签触发onclick事件而不跳转的多种解决方法

    因此我们经常会用链接&lt;a&gt;&lt;/a&gt;形式代替&lt;button&gt; 触发onclick事件。 代码如下: 代码如下: [removed] function del(){ if(confirm&#40;“确定删除该记录?”&#41;){ parent.[removed]=”执行删除.jsp”; return ...

    网页制作简易图片列表

    &lt;li&gt;&lt;a onclick="alert(1)"&gt;&lt;img src="img/xiaodingdanghexianzijiuyuan.jpg" border="0" /&gt;&lt;span&gt;小叮当和仙子救援大行动&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a onclick="alert(1)"&gt;&lt;img src="img/bihu.jpg" border="0" /&gt;...

    金山WPS宏文件

    &lt;button onclick="InitFrame()"&gt;初始化插件&lt;/button&gt;&lt;br /&gt; &lt;button onclick="OnNew()"&gt;新建文档&lt;/button&gt;&lt;br /&gt; &lt;button onclick="SaveAsLocal()"&gt;保存到本地&lt;/button&gt;&lt;br /&gt; &lt;button onclick="Open()...

    详解a标签添加onclick事件的几种方式

    这种方法在传递this等参数的时候很容易出问题,而且[removed]协议作为a的href属性的时候不仅会导致不 必要的触发[removed]事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行 javascript语句 2....

    阻止 <a> 地址轉向

    阻止 &lt;a&gt; 地址的轉向,並有超連結的符號

    ASP.Net电子商务网站后台模板

    &lt;li id="now1a"&gt;&lt;a title="标签管理" href="#" target="content3"&gt;&lt;span&gt;标签管理&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="now1b"&gt;&lt;a title="模板管理" onclick="show_title('生成文件管理')" href="#" target="content3"&gt; ...

    VUE解决 v-html不能触发点击事件的问题

    背景:后端返前端html格式的数据,前端用v-html解析渲染,如:&lt;a&gt;&lt;/a&gt;,a标签能成功渲染,但其绑定的事件无法触发。 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: ...

    javascrip上百技术总集

    asp .net TextBox控件 下&lt;br&gt;用javascript操作asp.net label控件 外一篇&lt;br&gt;用javascript改变onclick调用的函数&lt;br&gt;用JavaScript加密保护网站页面&lt;br&gt;用Javascript检测网速的方法&lt;br&gt;用Javascript评估用户输入密码的...

    ddl语言自定义数据库字段

    "&gt;&lt;br&gt; &lt;%&lt;br&gt; sFileName = "alter_manage.asp"&lt;br&gt; tableName = "C_alter"&lt;br&gt; tableName2 = "product"&lt;br&gt; action = Trim(Request.QueryString("action"))&lt;br&gt; %&gt;&lt;br&gt; &lt;br&gt; &lt;%&lt;br&gt; Select Case action&lt;br&gt; case ...

    自适应宽度的标签导航

    href="javascript:void(0)"&gt;自适应宽度的标签&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt; &lt;DIV id=tagContent&gt; &lt;DIV class=tagContent id=tagContent0&gt;第一个标签的内容&lt;/DIV&gt; &lt;DIV class="tagContent selectTag" id=tagContent1&gt;第二个标签的...

    经典纯css网站导航代码

    &lt;a href="http://www.qih8.com" id="curTab" class="nav" onclick="changeId('curTab',this)"&gt;&lt;span&gt;首页&lt;/span&gt;&lt;/a&gt; &lt;div&gt;&lt;/div&gt; &lt;a href="http://www.qih8.com" class="nav" onclick="changeId('curTab',...

    Delphi7.完美经典.part1

    &lt;br&gt;5-1-1 Caption属性 &lt;br&gt;5-2 TButton类对象 &lt;br&gt;5-2-1 Caption属笥 &lt;br&gt;5-2-2 OnClick事件 &lt;br&gt;5-3 TEdit类对象 &lt;br&gt;5-4 TCanvas类对象 &lt;br&gt;5-5 Showmessage函数 &lt;br&gt;5-6 InputBox函数 &lt;br&gt;5-7 MessageDlg函灵敏 ...

    jquery A标签onclick事件

    jquery下A标签onclick事件的处理,看看看看看看。

    ATL实现的CDHtmlDialog模板类

    这个文件提供了若干个类和模板类,开发者只需关注其中两个模板类:CDHtmlDialogImpl&lt;&gt;和CMultiPageDHtmlDialogImpl&lt;&gt;,第一个模板类实现了WEB页面布局的对话框,第二个模板类以第一个类为基础,扩展成了在一个对话框...

    微信飞机大战

    &lt;!DOCTYPE ... &lt;div&gt;&lt;button onclick="jixu()"&gt;继续&lt;/button&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript" src="../js/main.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

    JavaScript对TreeView的操作

    得到点击节点 &lt;br&gt; function TreeView1.onclick() &lt;br&gt; { &lt;br&gt; alert(TreeView1.getTreeNode(TreeView1.clickedNodeIndex).getAttribute("Text")); &lt;br&gt; } &lt;br&gt; &lt;br&gt; 5.添加节点 &lt;br&gt; function AddNode() &lt;br&gt; { &lt;br...

    webservice-ajax

    &lt;br&gt;}&lt;br&gt;&lt;/script&gt;&lt;br&gt;&lt;/head&gt;&lt;br&gt;&lt;body&gt;&lt;br&gt;&lt;form id="form1" runat="server"&gt;&lt;br&gt;&lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;&lt;br&gt;&lt;Services&gt;&lt;br&gt;&lt;asp:ServiceReference Path="~/WebServices/...

    js 日历控件

    red" /&gt;(yyyy-mm-dd)&lt;br&gt; &lt;/td&gt;&lt;br&gt; &lt;/tr&gt;&lt;br&gt; &lt;tr bgcolor="#FFFFFF"&gt;&lt;br&gt; &lt;td align="center" class="style4"&gt;&lt;br&gt; 截止日期:&lt;br&gt; &lt;/td&gt;&lt;br&gt; &lt;td&gt;&lt;br&gt; &lt;input type="text" name="enddate" onclick="fPopCalendar...

Global site tag (gtag.js) - Google Analytics