我才12岁 ?

昨天在做优化时，遇到一个问题，就是一个链接，当点击时，不直接跳转，而需要ajax判断一下是跳转还是在本页弹出错误提示，如果通过后，改变url地址，显然已经无法在新窗口中打开链接了，如果使用window.open会被一些浏览器阻止的，那么必须想办法模拟点击啦。

最初我想的方法是，添加mouseover事件，当鼠标移上去时就判断是否可点，虽然可以实现，但是开发反应这样子会给服务器带来很大压力，请教了遇春，给我了两个解决办法，十分感谢哈，这两个以前都没用过，既然学到了就和大家分享一下。

方法一：click()

IE浏览器本身支持click，所以IE下很好办，但是其它浏览器不支持，需要为它们添加一个方法：

Object.prototype.click=function(){  

    var evt = document.createEvent("MouseEvents");

    evt.initEvent("click", true, false);

    this.dispatchEvent(evt); 

}

这样子，可以实现同样的效果，但是在Firefox下不会激活默认事件（最新的Opera、Safari、Chrome均可正常使用），大家可以在浏览器中运行一下：

<a href="http://www.taobao.com" title="" id="aa" target="_blank">asdf</a>
<button onclick="clicka();">a</button>
<script type="text/javascript">
Object.prototype.click2=function(){
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("click", true, false);
    this.dispatchEvent(evt); 
}
function clicka(){
    document.getElementById("aa").click2();
}
function redirect(){
    alert('ok,但是firefox下没有页面跳转！');
}
document.getElementById("aa").onclick=redirect;
</script>

因为在Firefox下不能跳转，所以这种方法只能排除。

方法二：

这个方法就是放一个隐藏的form，如果验证通过，则更新form的action并触发form的submit()来实现跳转，很简单的实现了目的。

<a href="javascript:void(0)" id="hehe">需要验证的链接</a>
<form name="f" target="_blank"></form>
<script type="text/javascript">
function check() {
    //ajax判断，如果通过验证则执行以下代码
    document.f.action = 'http://www.taobao.com';
    document.f.submit();
}
document.getElementById('hehe').onclick = check;
</script>

注意：很遗憾的告诉各位，经过服务器上的测试，它和window.open一样，会被阻止的。 — 7.8日晚
暂时的解决办法是：window.open(url) || (location.href = url)，让可以跳的跳，不可以的就在本窗口打开.–7.9日晚

参考资料：

• dispatchEvent
• createEvent
• initEvent
• createEvent英文资料
• initEvent英文资料

标签： click, createEvent, dispatchEvent, initEvent

这篇文章发布于 2009年07月8日，星期三，09:05，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。