javascript 怎么控制a标签的跳转

JavaScript08

javascript 怎么控制a标签的跳转,第1张

JS控制A标记的href跳转可以按照以下方法实现:

var a = document.getElementById("aHref")

a.href = '/user'

//取消<a>标签原先的onclick事件,使<a>标签点击后通过href跳转(因为无法用js跳转)

a.setAttribute("onclick",'')

//激发标签点击事件OVER

a.click("return false")

你指的是禁用默认事件? 百度 1.jQuery 阻止默认事件 $("a").click(function( event ) {     event.preventDefault() // 阻止默认事件     event.stopPropagation() // 阻止冒泡 })2.javascript  var elem = document.getElementByTagName("a")elem.addEventListener("click",function(event){     event.preventDefault() // 阻止默认事件     event.stopPropagation() // 阻止冒泡  },false)说明: preventDefault()   // 阻止默认事件 stopPropagation()  // 阻止冒泡 return false   // 既阻止默认事件 也阻止冒

在web页面开发时,我们经常会遇到下列情况:

1.一个标签仅仅是要触发onclick行为;

2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。

比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除。因此我们经常会用链接<a></a>形式代替<button>触发onclick事件。

代码如下:

复制代码 代码如下:

<script type="text/javascript">

function del(){

if(confirm("确定删除该记录?")){

parent.window.location="执行删除.jsp"

return true

}

return false

}

</script>

<a href="" target="mainFrame" class="STYLE4" onclick="del()" >删除</a>

这样做的后果是js代码会跳转到"执行删除.jsp"页面,而<a>标签也会跳转打开一个空页面。因为html本身对 <a>标签的href属性做了处理,所以就会先执行我们自己定义的方法,接着再运行它自身的方法(跳转的方法)。

解决方法主要有四种,如下:

1. 不用a标签,设定css或用js来表现(有点复杂);

2. 用a标签,onclick属性或onclick事件中返回false;(个人喜欢)

如:<a href="" target="mainFrame" class="STYLE4" onclick="del()return false" >删除</a>

这是个执行顺序的问题,<a>这个标签的执行顺序应该是先执行onclick 的脚本,最后才进行href参数指定页面的跳转。在onclick中返回false,就可以中止<a>标签的工作流程,也就是不让页面跳转到href参数指定的页面。

3. 用href="javascript:void(0)"这种伪协议;(这种伪协议,少写的好)

即:<a href="javascript:void(0)" target="mainFrame" class="STYLE4" onclick="del()" >删除</a>

4. <a href="#" class="STYLE4" onclick="del()" >删除</a>。(总是跳转到当前页面顶部,当页面内容较多时,还是会有跳转的感觉)