javascript - How to modify the default triggering mechanism of the browser's a tag attribute?
伊谢尔伦
伊谢尔伦 2017-07-01 09:12:15
0
9
1867

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

伊谢尔伦
伊谢尔伦

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

reply all(9)
过去多啦不再A梦

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

e.preventDefault()

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

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

});
})

淡淡烟草味
$('a').click(function() {
  var link = this
  $.get(xx, function() {
    location.href = link.href 
  });
  return false // 阻止先不跳转
})
曾经蜡笔没有小新

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

//todo。。。。。

window.location.href = 'url'

}

刘奇

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

typecho

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

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

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);
曾经蜡笔没有小新

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>
为情所困
<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");
    }
}
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template