При нажатии на элемент привязки: происходит ли какое-либо событие на целевом элементе? - PullRequest
Новая
       16

При нажатии на элемент привязки: происходит ли какое-либо событие на целевом элементе?

0 голосов
/ 14 октября 2019

Я сталкиваюсь со следующей проблемой:

У меня есть элемент привязки <a href="#target">TARGET</a> и целевой элемент <div id="target">content</div>.

Что я хочу сделать, это вызвать метод определенна целевом элементе .

Причина этого критерия основана на необходимости вызова метода, даже если ссылка идет с другой подстраницы.

Моя первая идея до исследования быласобытие <div id="target" focus="myMethod">content</div>, но оно не срабатывает.

Затем я начал исследование W3schools HTML тега и jQuery API , а также Stackoverflow ofc. но я не нашел связанных постов (возможно, из-за огромного количества вопросов относительно того, «как вызвать событие нажатия элемента»).

Я ценю любые идеи, потратил на это довольно много времени: (

Ответы [ 2 ]

0 голосов
/ 14 октября 2019

Вы можете установить имя функции вашего метода для каждого элемента в атрибуте data-method (чтобы избежать определения метода как пользовательского свойства самого HTML-элемента, что для некоторых считается плохой практикой из-за возможностипобочных эффектов).

Затем прослушайте событие hashchange и загрузку страницы, чтобы найти элемент, соответствующий текущему значению хеш-функции, и вызвать его метод. Примечание: я использовал this вместо window для вызова функции метода, чтобы не зависеть от области действия. 

// the method you want to be called when the page jumps to the element:
function contentElementMethod() {
  console.log("the hash corresponds to the #content element!");
}

// the handler for getting the element corresponding to the current location hash and calling the method defined in its [data-method] attribute
function hashElementHandler() {
  if (!window.location.hash) return; // we don't want to fire the first method found when there's no location hash set, e.g. when the page loads without one
  
  var hashEl = document.querySelector(window.location.hash + '[data-method]');
  if(hashEl) {
    this[hashEl.getAttribute('data-method')]();
  }
}

// listen to the hash change event
window.addEventListener("hashchange", hashElementHandler);

// also check the page hash on page load (wrap this 
window.addEventListener('DOMContentLoaded', hashElementHandler);
<p><a href="#target">TARGET</a></p>
<div id="target" data-method="contentElementMethod">content</div>
0 голосов
/ 14 октября 2019

Прослушайте событие hashchange, а затем запустите собственное событие для целевого события. 

$(document).on("hashchange", function() {
    $(window.location.hash).trigger("linkedto");
});

$("#target1").on("linkedto", function() {
    ...
});
...