`

在IE6下 a标签添加行间onclick事件导致页面跳转失败原因分析

阅读更多



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js在IE6下 a标签添加行间onclick事件导致js跳转失败的元凶, href="javascript:void(0);"</title>

<style type="text/css">
* {margin:0;padding:0;margin:0 auto;}
</style>
</head>

<body>
<br />
<p> href="javascript:void(0);" 和 href="javascript:;" 的写法没关系</p> <br />

<p> location.replace 和 location.href 的区别: </p>
<p> 在IE、chorome 条件下 location.replace 不能点回退, Firefox则可以回退 </p>
<p> 在IE、chorome、Firefox 条件下location.href 都能点回退 </p>
 <br />
<p> 1  href="javascript:void(0);" </p> <br />
<a href="javascript:void(0);" onclick="javascript:location.replace ('http://www.baidu.com/');">a IE6不能跳转 </a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0);" onclick="javascript:location.href ='http://www.baidu.com/';">a IE6不能跳转 </a>  
 <br /><br /><br />
<p> 2  href="javascript:;" </p> <br />
<a href="javascript:;" onclick="javascript:location.replace ('http://www.baidu.com/');">a IE6不能跳转 </a>  &nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:;" onclick="javascript:location.href ='http://www.baidu.com/';">a IE6不能跳转 </a>  
 <br /> <br /><br />
<p>1 第一种写法 直接给对象添加事件,节点添加事件  </p>
<p>2 第二种写法 这种情况更加动态,addEventListener || attachEvent 更为实用,  </p>
<p>  而且还能添加多个函数(添加的事件的顺序即执行顺序)----->执行顺序不同浏览器不同!但是我们希望是顺序执行!  </p>
<a id="a1" href="javascript:;"> a 能跳转 </a>&nbsp;&nbsp;&nbsp;&nbsp;
<a id="a2" href="javascript:;"> a 能跳转 </a>  <br /> <br />

<p> add return false;  </p>
<a href="javascript:void(0);" onclick="javascript:location.replace ('http://www.baidu.com/'); return false;">a 能跳转 </a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0);" onclick="javascript:location.href ='http://www.baidu.com/'; return false;">a 能跳转 </a>
<script type="text/javascript">

var oA1 = document.getElementById("a1");
var oA2 = document.getElementById("a2");

oA1.onclick = oA2.onclick = function(){
	oA1.href = oA2.href = "http://www.baidu.com";
	//return false; //加了就不能跳转了。
};


</script>
</body>
</html>




经测试,在IE6下上述两种JS跳转履行无响应,其它浏览器下均正常。

解析:猜测IE6下a链接的跳转会收到href属性中代码的影响,

上述代码的履行过程,貌似是先履行 onclick事务中的代码,

并且是在onclick事务的回调函数返回true 的景象下,

再履行href属性中的代码,然后才作出跳迁移转变作。

而恰是void(0);代码阻拦了浏览器跳转,所以在onclick的代码最后,加上return false;

让onclick回调函数返回false值,以阻拦履行 href属性中的代码,如许就可以让浏览器顺利跳转。



分享到:
评论

相关推荐

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

    在web页面开发时,我们经常会遇到下列情况: 1.一个标签仅仅是要触发onclick行为; 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。 比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户...

    jquery A标签onclick事件

    ### jQuery 下 A 标签 onclick 事件处理 在前端开发中,经常需要为页面中的元素绑定事件处理函数,其中 `onclick` 事件是最常见的交互方式之一。jQuery 是一个流行的 JavaScript 库,它提供了简单易用的方法来处理...

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

    综合以上,最推荐的`&lt;a&gt;`标签添加`onclick`事件的方法是: - `&lt;a href="javascript:void(0)" onclick="js_method();"&gt;点击我&lt;/a&gt;` - `&lt;a href="javascript:;" onclick="js_method();"&gt;点击我&lt;/a&gt;` - `&lt;a href="#" ...

    ie6下a标签的onclick事件不执行问题解决方案

    在IE6中,当`&lt;a&gt;`标签的`href`属性被设置为`javascript:void(0)`或者空字符串时,浏览器会尝试阻止默认的页面跳转行为,以便执行`onclick`事件中的JavaScript代码。然而,IE6的事件处理机制并不完善,它有时无法正确...

    IE8的JavaScript点击事件(onclick)不兼容的解决方法

    在标准模式下,IE8及以下版本不支持通过`setAttribute`直接为元素添加事件监听器,这与现代浏览器如Chrome和Firefox存在差异。为了确保兼容性,通常推荐使用`addEventListener`方法为元素添加事件监听器,但由于IE8...

    jsp的onclick页面事件

    jsp的onclick页面事件 包含打开保存 跳转 关闭等

    js中a标签的onclick点击事件的转义格式

    js页面,进行页面内容的拼接时,a标签的onclick点击事件,需要传参数时,解决转义麻烦,不对的情况,提供了模板

    input按钮onclick事件大全

    ### Input按钮Onclick事件详解 在Web开发中,`&lt;input&gt;`标签是HTML文档中最常用的元素之一,常用于创建各种交互式按钮、输入框等。`onclick`属性则允许我们在用户点击这些元素时执行特定的JavaScript代码。下面将...

    a标签的href与onclick事件的区别详解

    `href`和`onclick`都是`&lt;a&gt;`标签的重要属性,它们各自承担着不同的职责,但在某些场景下可能会同时使用,这就涉及到它们之间的区别和交互。 1. **事件顺序**: 当一个`&lt;a&gt;`标签同时具有`href`和`onclick`时,`...

    a标签href属性和onclick事件的比较介绍

    如果希望阻止&lt;a&gt;标签默认的跳转行为,可以在onclick事件处理器的函数中返回false。这样,无论href属性指向哪里,页面都不会进行跳转。例如,一个常见的用途是在表单提交前进行数据校验,如果校验失败,则阻止表单...

    a 标签跳转

    - **锚点链接**:通过给目标元素添加`id`属性,并在`a`标签的`href`属性中使用`#`加上该`id`值来实现。 ```html &lt;a href="#section1"&gt;#section1是要跳转到的位置标签的id&lt;/a&gt; 这里是section1的内容。 ``` #### ...

    ASP单选按钮实现页面跳转并传值

    在这里,我们使用了 onclick 事件来执行页面跳转,并将单选按钮的值传递给下一个页面。 接下来,让我们详细了解一下上面的代码。&lt;input type="radio" name="r1" value="one" onclick="location.href='XXX.asp?value...

    A标签隐藏传参

    HTML JSP 页面A标签访问后台,JSP 或者 直接跳转 HTML页面 进行隐形传参

    Android 单击实现页面跳转

    本教程将详细介绍如何在Android中实现单击事件触发的页面跳转。 首先,我们需要了解Android中的Activity。Activity是Android应用的基本组件,它代表了用户可以看到并与其交互的一个屏幕。在AndroidManifest.xml文件...

    html超链接a标签的href跳转跟onclick之间执行顺序示例介绍

    在`&lt;a&gt;`标签上设置`onclick`事件,可以执行自定义的JavaScript代码,例如弹出确认对话框、执行数据验证或发送Ajax请求等。这种结合使得`&lt;a&gt;`标签不仅可以进行页面跳转,还能在跳转前执行额外的操作。 如描述中所述...

Global site tag (gtag.js) - Google Analytics