It is known that the execution order of a tag is onclick->href attribute
當(dāng)點(diǎn)擊瀏覽器a標(biāo)簽的時(shí)候,瀏覽器的默認(rèn)機(jī)制如下:
1、觸發(fā)a的click事件
2、讀取href屬性的值
3、如果是URI則跳轉(zhuǎn)
4、如果是javascript代碼則執(zhí)行該代碼
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
小伙看你根骨奇佳,潛力無(wú)限,來(lái)學(xué)PHP伐。
$('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 // 阻止先不跳轉(zhuǎn)
})
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
Why not assign a value to href
first, and then jump after the request is completed?
1、禁止a標(biāo)簽跳轉(zhuǎn) href="javascript:void(0)"
2、其他的在onclick方法中進(jìn)行
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 為你的監(jiān)聽onclick回調(diào)函數(shù)中傳遞的參數(shù)
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請(qǐng)求,時(shí)間間隔假設(shè)為1秒
setTimeout(function() {
tag.href = 'xxx';
tag.onclick = function() {};
tag.click();
tag.onclick = aTagCustomEvent;
}, 1000)
return false;
}
//為頁(yè)面中所有a標(biāo)簽設(shè)置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");
}
}