简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 如何修改瀏覽器的a標籤屬性的預設觸發機制？
伊谢尔伦
伊谢尔伦 2017-07-01 09:12:15
0
9
1772

已知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伐。

全部回覆(9)
过去多啦不再A梦
过去多啦不再A梦2017-07-01 09:14:15 9樓

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

雷雷

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

雷雷

});
})

點贊 +0
新增回覆
淡淡烟草味
淡淡烟草味2017-07-01 09:14:15 8樓

雷雷

點贊 +0
新增回覆
曾经蜡笔没有小新
曾经蜡笔没有小新2017-07-01 09:14:15 7樓

在onclick裡面使用js跳轉頁
//ajax start
success:function(){

//todo。。。。。

window.location.href = 'url'

}

點贊 +0
新增回覆
刘奇
刘奇2017-07-01 09:14:15 6樓

1、禁止a標籤跳轉 href="javascript:void(0)"
2、在onclick方法中請求ajax，成功後，將返回值綁定到href上

點贊 +0
新增回覆
typecho
typecho2017-07-01 09:14:15 5樓

為什麼不先不給href賦值，等請求完了再跳轉？

點贊 +0
新增回覆
学霸
学霸2017-07-01 09:14:15 4樓

雷雷

點贊 +0
新增回覆
Peter_Zhu
Peter_Zhu2017-07-01 09:14:15 3樓

瀏覽器所有的是有的預設事件的禁用，都可以用event.preventDefault() 來阻止，剩下的在你的回調函數裡，你可以任意的去操作, 當然如果你需要兼容IE8及以下，可以相容寫法如下：

// event 为你的监听onclick回调函数中传递的参数
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
點贊 +0
新增回覆
曾经蜡笔没有小新
曾经蜡笔没有小新2017-07-01 09:14:15 2樓

久等了，請吃

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

雷雷

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！