zoukankan      html  css  js  c++  java
  • a标签中的href,onclick,#,javascript:void简要分析 (转载)

    View Code
     1 <script type="text/javascript">
    2 window.onbeforeunload=function()
    3 {
    4 alert("onbeforeunload event...");
    5 //return false;
    6 }
    7 </script>
    8 <a href="#" onclick="return true;">测试1</a><br/>
    9 <a href="javascript:void(0)" onclick="return true;">测试2</a><br/>
    10 <a href="javascript:void(0)" onclick="return false;">测试3</a><br/>
    11 <a href="javascript:void(alert('test 4....'))" onclick="return true;">测试4</a><br/>
    12 <a href="javascript:void(alert('test 5....'))" onclick="return false;">测试5</a><br/>

        在开发过程中,经常会使用测试1<a href='#' onclick='fun();return false;'/>这种方式来触发javascript事件而不改变当前链接.

    或者测试2<a href="javascript:void(0)" onclick="return true;">测试2</a>这种方式来建立死链接。但是只要看过a href=”《javascript:void(0);” — avoid the void》和《How to Create Pop-Up Windows》这2篇文章后就能发现,作者更赞同使用测试1的方式而不是测试2,我也是认同作者的观点。

        在web标准中也是不建议使用测试2的方式的,但是测试2javascript:void(0)伪协议也会有bug存在,会使gif动画停止播放。

    在测试2的案例中,我们还能看到,点击事件触发的时候(调用顺序:onclick->window.onbeforeunload->href),而测试1却没有,这是因为void运算符在执行之前会调用window.onbeforeunload方法

    对于void运算符(void只做运算,返回结果为undefined),所以在调用到href时遇到void运算符的时候,可能就会产生一些bug

        但是使用测试1的方式href='#' onclick中加上return false,也会存在问题,导致点击链接页面返回顶部,这是由于#号默认锚点为#top,点击后重新定位到top锚点位置,当然可以自己再重新定义一个 top锚点,但是这也不能很好解决问题,仍然也存在定位不准。有些朋友喜欢使用####来替换#(#一般为2到6个,大多都取4个)。无论#几个都是会存在这个bug的,原因同上。

    点击链接导致页面返回顶部也可以采用span标签替换a标签来解决,但是还可以不改变标签,只需讲#用#this替换即可解决问题,也可以采用其它锚点

    <a href='#this' onclick='fun();return false;'/>

    另:当window.onbeforeunload中return false的时候将会有意想不到的收获。提示“确实要离开页面吗?确定...取消...”

    Top
    收藏
    关注
    评论
  • 相关阅读:
    【日更计划021】数字IC基础题
    【日更计划020】数字IC基础题
    【日更计划019】数字IC基础题
    【日更计划018】数字IC基础题
    【日更计划017】数字IC基础题
    【日更计划016】数字IC基础题
    【第六章:串扰噪声 上】静态时序分析圣经翻译计划
    列向量叉乘
    关闭微软拼音ctrl+shirt+b弹出的表情面板
    nginx 开启gzip, vue加载速度加快
  • 原文地址:https://www.cnblogs.com/shiqi/p/2416341.html
Copyright © 2011-2022 走看看