登录

javascript - 如何修改浏览器的a标签属性的默认触发机制?

已知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
伊谢尔伦 伊谢尔伦 2462 天前 1644 次浏览

全部回复(9) 我要回复

  • 过去多啦不再A梦

    过去多啦不再A梦2017-07-01 09:14:15

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

    e.preventDefault()

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

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

    });
    })

    回复
    0
  • 淡淡烟草味

    淡淡烟草味2017-07-01 09:14:15

    $('a').click(function() {
      var link = this
      $.get(xx, function() {
        location.href = link.href 
      });
      return false // 阻止先不跳转
    })

    回复
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-07-01 09:14:15

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

    //todo。。。。。
    
    window.location.href = 'url'

    }

    回复
    0
  • 怪我咯

    怪我咯2017-07-01 09:14:15

    1、禁止a标签跳转 href="javascript:void(0)"
    2、在onclick方法中请求ajax,成功后,将返回值绑定到href上

    回复
    0
  • typecho

    typecho2017-07-01 09:14:15

    为什么不先不给href赋值,等请求完了再跳转?

    回复
    0
  • 欧阳克

    欧阳克2017-07-01 09:14:15

    1、禁止a标签跳转 href="javascript:void(0)"
    2、其他的在onclick方法中进行

    回复
    0
  • 天蓬老师

    天蓬老师2017-07-01 09:14:15

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

    // event 为你的监听onclick回调函数中传递的参数
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

    回复
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-07-01 09:14:15

    久等了,请食用

    <!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

    <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
  • 取消 回复 发送