简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 如何修改浏览器的a标签属性的默认触发机制？
伊谢尔伦
伊谢尔伦 2017-07-01 09:12:15
0
9
1697

已知a标签的执行顺序是onclick->href属性

当点击浏览器a标签的时候，浏览器的默认机制如下：

1、触发a的click事件

2、读取href属性的值

3、如果是URI则跳转

4、如果是javascript代码则执行该代码

如何改变这个机制，使得在onclick事件执行完毕时在去执行href属性的url进行跳转，其中onclick事件中的函数发送了ajax请求，根据返回值对href属性进行了修改

修改href属性后需要在当前浏览器新开页面

update------------------------2017.06.30------------------------------------

经测试，将ajax请求修改为同步执行，依然不能够使a标签的onclick函数执行完毕再去执行href的动作

究其原因，猜测可能是ajax修改为同步请求，会阻塞当前页面的其他操作，

但a标签的已经完成了点击，就继续执行了后续的href动作，而href动作此时是void(0),此时ajax的请求还没有返

回，也就是说ajax的同步请求并没有阻塞a标签的动作

期待更佳答案

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(9)
过去多啦不再A梦
过去多啦不再A梦2017-07-01 09:14:15 9 楼

$('a').click(function(e) {

e.preventDefault()

var _ = $(this)
$.get(xx, function() {

location.href = _.attr('href')

});
})
点赞 +0
添加回复
淡淡烟草味
淡淡烟草味2017-07-01 09:14:15 8 楼 
$('a').click(function() {
  var link = this
  $.get(xx, function() {
    location.href = link.href 
  });
  return false // 阻止先不跳转
})
点赞 +0
添加回复
曾经蜡笔没有小新
曾经蜡笔没有小新2017-07-01 09:14:15 7 楼

在onclick里面使用js跳转页面
//ajax start
success:function(){

//todo。。。。。

window.location.href = 'url'

}
点赞 +0
添加回复
刘奇
刘奇2017-07-01 09:14:15 6 楼

1、禁止a标签跳转 href="javascript:void(0)"
2、在onclick方法中请求ajax，成功后，将返回值绑定到href上
点赞 +0
添加回复
typecho
typecho2017-07-01 09:14:15 5 楼

为什么不先不给href赋值，等请求完了再跳转？
点赞 +0
添加回复
学霸
学霸2017-07-01 09:14:15 4 楼 
1、禁止a标签跳转 href="javascript:void(0)"
2、其他的在onclick方法中进行
点赞 +0
添加回复
Peter_Zhu
Peter_Zhu2017-07-01 09:14:15 3 楼

浏览器所有的是有的默认事件的禁用，都可以用 event.preventDefault() 来阻止，剩下的在你的回调函数里，你可以任意的去操作, 当然如果你需要兼容IE8及以下，可以兼容写法如下：

// event 为你的监听onclick回调函数中传递的参数
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
点赞 +0
添加回复
曾经蜡笔没有小新
曾经蜡笔没有小新2017-07-01 09:14:15 2 楼

久等了，请食用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <a href="" target="_blank">click</a>
    <script>
        function aTagCustomEvent(e) {
            var tag = e.target;

            //setTimeout模拟异步的ajax请求,时间间隔假设为1秒
            setTimeout(function() {
                tag.href = 'xxx';
                tag.onclick = function() {};
                tag.click();
                tag.onclick = aTagCustomEvent;
            }, 1000)
            return false;
        }

        //为页面中所有a标签设置onclick事件
        var aTags = [].slice.call(document.getElementsByTagName("A"));
        aTags.forEach(function(tag) {
            tag.onclick = aTagCustomEvent;
        })

    </script>
</body>

</html>
点赞 +0
添加回复
为情所困
为情所困2017-07-01 09:14:15 1 楼 
<a href="javscript:;" onclick="doSomething(this);">

function doSomething(obj) {
    if($(obj).attr("href") === "javscript:;") {
        // ... ajax get and set url
        $(obj).attr("target", "_blank").trigger("click");
    }
}
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！