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
过去多啦不再A梦2017-07-01 09:14:15
$('a').click(function(e) {
e.preventDefault()
var _ = $(this)
$.get(xx, function() {
location.href = _.attr('href')
});
})
淡淡烟草味2017-07-01 09:14:15
$('a').click(function() {
var link = this
$.get(xx, function() {
location.href = link.href
});
return false // 阻止先不跳转
})
曾经蜡笔没有小新2017-07-01 09:14:15
Use js to jump to the page in onclick
//ajax start
success:function(){
//todo。。。。。
window.location.href = 'url'
}
怪我咯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
typecho2017-07-01 09:14:15
Why not assign a value to href
first, and then jump after the request is completed?
天蓬老师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);
曾经蜡笔没有小新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>
为情所困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");
}
}