0
アンカータグをターゲットにして、Ajaxリクエストをトリガーしようとしています。使用してjQueryのは、これは非常に簡単です:アンカーで委任されたクリックイベント
$(document.body).on('click', "a", function (event) {
'use strict';
if ($(this).is('.a-btn')) {
event.preventDefault();
} else if ($(this).is('.no-sp')) {
//
} else {
address = $(this).attr("href")
event.preventDefault();
App.Ajax.Page(address + '/');
}
});
は、しかし、私はトリックを行うだろうevent.target
を使用して想像ネイティブJavaScriptを使用して。
しかし、これは動作しません、アンカータグ内にあるものは何でも要素イベントは常にターゲットので:それは可能である
App.Ajax.Navigate = function() {
'use strict';
document.body.addEventListener('click', function (e) {
e.preventDefault();
console.log(e.currentTarget);
if (e.target.tagName === 'a') {
var element, link;
element = e.target;
link = element.href;
if (App.HTML.hasClass(element, 'a-btn')) {
e.preventDefault();
} else if (App.HTML.hasClass(element, 'no-sp')) {
return;
} else {
e.preventDefault();
App.Ajax.Page(link);
}
}
}, true);
window.onpopstate = function (event) {
App.Page.type = event.state.type;
App.Page.Replace(event.state.content, event.state.type, App.Empty, false);
};
};
私はjqueryのは、最初のコードスニペットでは何を行うにはネイティブJavaScriptを使用したいです、 ?
最も近い、ブラウザの束ではサポートされていません...私はすべてのブラウザでサポートされていない実験方法を使用したくない – epascarello
。 –
@epascarelloでも、polifillを使うことができます。答えの2つのソリューションをリンクで参照してください(今は英語版のドキュメントを参照しています)。 – Qwertiy