search

Home  >  Q&A  >  body text

javascript - How to modify the default triggering mechanism of the browser's a tag attribute?

It is known that the execution order of a tag is onclick->href attribute

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

1、触发a的click事件

2、读取href属性的值

3、如果是URI则跳转

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

How to change this mechanism so that when the onclick event is completed, the URL that executes the href attribute will jump. The function in the onclick event sends an ajax request and performs the href attribute according to the return value. Modified

After modifying the href attribute, you need to open a new page in the current browser

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

After testing, the ajax request was modified to be executed synchronously, but it still failed to complete the onclick function of the a tag and then execute the href action

The reason may be that ajax is modified to a synchronous request, which will block other operations on the current page.

But the click of the a tag has been completed, and the subsequent href action continues to be executed, and the href action is void(0) at this time, and the ajax request has not returned yet

Back, that is to say, the ajax synchronization request does not block the action of the a tag

Looking forward to better answers

伊谢尔伦伊谢尔伦2710 days ago1826

reply all(9)I'll reply

  • 过去多啦不再A梦

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

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

    e.preventDefault()

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

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

    });
    })

    reply
    0
  • 淡淡烟草味

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

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

    reply
    0
  • 曾经蜡笔没有小新

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

    Use js to jump to the page in onclick
    //ajax start
    success:function(){

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

    }

    reply
    0
  • 怪我咯

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

    1. Prohibit a tag from jumping href="javascript:void(0)"
    2. Request ajax in the onclick method. After success, bind the return value to href

    reply
    0
  • typecho

    typecho2017-07-01 09:14:15

    Why not assign a value to href first, and then jump after the request is completed?

    reply
    0
  • 欧阳克

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

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

    reply
    0
  • 天蓬老师

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

    All default events in the browser can be disabled using event.preventDefault(). The rest is in your callback function, and you can do whatever you want. Of course, if you need to be compatible with IE8 and The following, compatible writing methods are as follows:

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

    reply
    0
  • 曾经蜡笔没有小新

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

    After a long wait, please eat

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

    reply
    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");
        }
    }

    reply
    0
  • Cancelreply