简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Wie ändere ich den Standard-Auslösemechanismus des A-Tag-Attributs des Browsers?
伊谢尔伦
伊谢尔伦 2017-07-01 09:12:15
0
9
1805

Es ist bekannt, dass die Ausführungsreihenfolge eines Tags das onclick->href-Attribut ist

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

1、触发a的click事件

2、读取href属性的值

3、如果是URI则跳转

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

So ändern Sie diesen Mechanismus, sodass nach Abschluss des Onclick-Ereignisses die URL, die das href-Attribut ausführt, springt. Die Funktion im Onclick-Ereignis sendet eine Ajax-Anfrage und ändert das href-Attribut basierend auf dem Rückgabewert Nachdem Sie das href-Attribut geändert haben, müssen Sie eine neue Seite im aktuellen Browser öffnen

Aktualisierung---------2017.06.30------ ---------------

Nach dem Test habe ich die Ajax-Anfrage auf synchrone Ausführung umgestellt, aber die Onclick-Funktion des a-Tags kann immer noch nicht ausgeführt werden, bevor die href-Aktion ausgeführt wird.

Der Grund kann sein, dass Ajax in eine synchrone Anfrage geändert wird, wodurch andere Vorgänge auf der aktuellen Seite blockiert werden,

Aber der Klick auf das a-Tag wurde abgeschlossen und die nachfolgende href-Aktion wird weiterhin ausgeführt. Die href-Aktion ist zu diesem Zeitpunkt void(0) und die Ajax-Anfrage wurde zu diesem Zeitpunkt noch nicht zurückgegeben

Antworten, das heißt, die Ajax-Synchronisierungsanforderung blockiert nicht die Aktion des a-Tags

Ich freue mich auf bessere Antworten

伊谢尔伦
伊谢尔伦

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

Antworte allen(9)
过去多啦不再A梦
过去多啦不再A梦2017-07-01 09:14:15 9 Etage

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

e.preventDefault()

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

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

});
})

Wie +0
Antwort hinzufügen
淡淡烟草味
淡淡烟草味2017-07-01 09:14:15 8 Etage 
$('a').click(function() {
  var link = this
  $.get(xx, function() {
    location.href = link.href 
  });
  return false // 阻止先不跳转
})
Wie +0
Antwort hinzufügen
曾经蜡笔没有小新
曾经蜡笔没有小新2017-07-01 09:14:15 7 Etage

在onclick里面使用js跳转页面
//ajax start
success:function(){

//todo。。。。。

window.location.href = 'url'

}

Wie +0
Antwort hinzufügen
刘奇
刘奇2017-07-01 09:14:15 6 Etage

1、禁止a标签跳转 href="javascript:void(0)"
2、在onclick方法中请求ajax，成功后，将返回值绑定到href上

Wie +0
Antwort hinzufügen
typecho
typecho2017-07-01 09:14:15 5 Etage

为什么不先不给href赋值，等请求完了再跳转？

Wie +0
Antwort hinzufügen
学霸
学霸2017-07-01 09:14:15 4 Etage 
1、禁止a标签跳转 href="javascript:void(0)"
2、其他的在onclick方法中进行
Wie +0
Antwort hinzufügen
Peter_Zhu
Peter_Zhu2017-07-01 09:14:15 3 Etage

浏览器所有的是有的默认事件的禁用，都可以用 event.preventDefault() 来阻止，剩下的在你的回调函数里，你可以任意的去操作, 当然如果你需要兼容IE8及以下，可以兼容写法如下：

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

久等了，请食用

<!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>
Wie +0
Antwort hinzufügen
为情所困
为情所困2017-07-01 09:14:15 1 Etage 
<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");
    }
}
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！