关于火狐和IE下href=”javascript:void(0)”兼容性的问题

By - Last updated: 星期日, 四月 5, 2015 Leave a Comment

写了一个简单的幻灯,但是上下翻动按钮在火狐和IE下点击后会打开一个空白页面,而谷歌是正常的。

<script type=”text/javascript” src=”/images/js/jquery-1.4.js”></script>
    <script src=”/images/js/jquery.superslide.2.1.1.js” type=”text/javascript”></script>
    <style type=”text/css”>
    /* css 重置 */
    .tup div,ul,li { padding: 0; margin: 0; }
    ul { list-style: none ; }
    img { border: none; }
    a { blr: expression(this.onFocus=this.blur()); outline: none; }
   
    /*本例css*/
    .chinaz { left: 50%; top: 0px; width: 1660px; height: 370px; overflow: hidden; margin-left: -830px; position: absolute; }
   
    /*数字按钮样式*/
    .chinaz .num { overflow:hidden; height: 25px; position: absolute; bottom:12px; left: 15px; zoom:1; z-index:3 }
    .chinaz .num li { width: 25px; height: 25px; line-height: 25px; text-align: center; font-weight: 400; font-family: “微软雅黑”, Arial; color: #FFFFFF; background: #444444; margin-right: 10px; border-radius:50%; cursor:pointer; float: left; }
    .chinaz .num li.on { background: #FF7700; } /*当前项*/
   
    /*上一个  下一个*/
    .chinaz .prev,
    .chinaz .next { display: none; width: 40px; height: 100px; background: url(/images/btn.png) no-repeat; position: absolute; top: 115px;}
    .chinaz .prev { left: 320px; }
    .chinaz .next { right: 320px; background-position: right; }
    .imgsf{ width:100%; height:370px; }
   
    </style>
    <div style=”width: 100%; height: 370px; overflow: hidden; position: relative; margin-top:46px;”>
    <div class=”chinaz”>
        <ul class=”51buypic”>
     
            <li> <a href=”http://cq.icqwz.com/LR/Chatpre.aspx?id=KGJ83106358″ target=”_blank”><img src=”/images/h1.jpg” class=”imgsf”/></a></li>
            <li> <a href=”http://cq.icqwz.com/LR/Chatpre.aspx?id=KGJ83106358″ target=”_blank”><img src=”/images/h2.jpg”  class=”imgsf”/></a></li>
            <li> <a href=”http://www.cqwzwh.com/a/jiankangrenzhuanti/2013/0710/4w.html” target=”_blank”><img src=”/images/h3.jpg”  class=”imgsf”/></a></li>
            <li> <a href=”http://www.cqwzwh.com/a/jiankangrenzhuanti/2012/0401/rl.html” target=”_blank”><img src=”/images/h4.jpg”  class=”imgsf”/></a></li>
           <li> <a href=”http://cq.icqwz.com/LR/Chatpre.aspx?id=KGJ83106358″ target=”_blank”><img src=”/images/h5.jpg”  class=”imgsf”/></a></li>
        </ul>
        <a target=”_blank” class=”prev” href=”javascript:void(0);”></a>
        <a target=”_blank” class=”next” href=”javascript:void(0);”></a>
    </div>
    </div>
        <script>
        /*鼠标移过,左右按钮显示*/
        $(“.chinaz”).hover(function(){
            $(this).find(“.prev,.next”).fadeTo(“show”,0.1);
        },function(){
            $(this).find(“.prev,.next”).hide();
        })
        /*鼠标移过某个按钮 高亮显示*/
        $(“.prev,.next”).hover(function(){
            $(this).fadeTo(“show”,0.7);
        },function(){
            $(this).fadeTo(“show”,0.1);
        })
        $(“.chinaz”).slide({ titCell:”.num ul” , mainCell:”.51buypic” , effect:”fold”, autoPlay:true, delayTime:700 , autoPage:true });
        </script>
经过排查,发现是href=”javascript:void(0);”导致的问题,本来javascript:void(0);的用处是不用整体刷新网页且返回一个空值,但这儿由于DOM本身的冒泡事件所以会最后执行HREF属性内的javascript:void(0);导致执行函数返回了一个空值,所以覆盖掉了前面正常执行函数所返回的值引起的错误。一般情况下,IE会先运行DOM本身绑定的事件,如ONCLICK;如果没有阻止冒泡,则会顺序执行HREF属性。如果想正确运行,可以在前面用RETURN FALSE终止冒泡,例如:
<a target=”_blank” class=”prev” onclick=”return false;” href=”javascript:void(0);”></a>
或者直接删去也行,如:
<a target=”_blank” class=”prev” ></a>

灵感记录 是本站开发的一款收藏记录创意分享 ,开启高效之门的在线应用。
点击:【收藏】 收藏此文

发表在 前端开发 • • ↑Top 文章来源