Witam,
Szukam rozwiązania problemu, na który napotkałem tworząc oskryptowanie do aplikacji PWA.
Mam na stronie odnośniki <a>, które mają domyślnie podane adresy w atrybucie "href" (czyli standardowy html). Na stronie działa klasa JS, która odpowiada za interfejs i wszelkie interakcje z nim - w tym za kliknięcia w odnośniki. Idea jest taka, żeby kliknięty odnośnik był obsłużony przez javascript, a zawartość podstorny pobrana z servera przez ajax bez całego szkieletu strony, bez przeładowania przy czym sam odnośnik ma mieć formę standardową aby dało się go udostępnić.
Przykładowy element menu:
<div class='side-menu-item'>
<a href='/asd/qwe/5875/dfg/'>
<div class='eb-img-button'>
<img src='/interface/buttons/any-icon.png' width='100%'>
</div>
<div class='item-caption'>Odnośnik 1</div>
</a>
</div>
W JavaScript mam funkcję, która dodaje nasłuch kliknięcia na każdy element <a> przy czym odpala funkcję w tej samej klasie, która ma obsłużyć ten odnośnik.
class Application {
linkClickHandler(){
var thisParent = arguments[0];
var event = arguments[1];
/*console.log("Arguments: ", arguments);
console.log("Parent: ", thisParent);
console.log("Event: ", event);
console.log("This: ", this);*/
if(event.target.nodeName == "A"){
console.log("Jest A");
console.log(this);
console.log(event);
// TUTAJ SKRYPT OBSŁUGUJĄCY LINK POPRZEZ AJAX
event.preventDefault();
event.stopPropagation();
return false;
} else console.log("To nie A....."+event.target.nodeName);
}
bindHandlers(){
var el = document.querySelectorAll('a');
var c = 0;
var f = 0;
for(var i=0;i<el.length;i++){
if(!el[i].hasAttribute("eb-handle")){
// el[i].addEventListener("click", this.linkClickHandler.bind(this), true);
el[i].addEventListener("click", this.linkClickHandler.bind(null,this), true); // zmiana bubble/capture nie jest zauważalna przy suzkaniu rozwiązania albo zwyczajnie nie umiem z tego korzystać :)
el[i].setAttribute("eb-handle", "true");
c++;
} else f++;
}
console.log('Handlers binded:'+c.toString()+'; Ignored: '+f.toString());
}
}
window.addEventListener("load", () => {
window.application = new Application();
window.application.bindHandlers();
});
"this" musze mieć zbindowane, ponieważ wewnątrz funkcji "linkClickHandler()" będę odwoływał się do właściwości i funkcji klasy. Niestety w ten sposób tracę domyślny uchwyt do klikniętego linku <a>, który przy braku bindowania domyślnie znajduje się pod słowem kluczowym "this".
Linki zawierają również inne elementy html takie jak <img>, <div>, <svg> i przy kliknięciu na nie, JS w event.target widzi właśnie tego div-a zamiast <a> a ja muszę pobrać atrybuty z użytego linku <a>. Myślałem o wspinaniu się w górę po DOM-ie do najbliższego "A" ale zastanawiam się, czy jest jakiś lepszy temat, który zamknię się w odpowiednim użyciu addEventListener() i Bind().
- obraz_2021-10-12_140552.png (24 KB) - ściągnięć: 3
