Блог

Главная - Вопросы по программированию - Почему мой внешний ресурс не работает в JSFiddle?

Почему мой внешний ресурс не работает в JSFiddle?

#javascript #jsfiddle

#javascript #jsfiddle

Вопрос:

Я создал простой пакет для сворачиваемых элементов с возможностью закрывать элемент при щелчке за его пределами с помощью атрибута data-close-on-click-outside . Локально это работает, а также, если бы я скопировал JS в JSFiddle, это работает, но когда я включаю JS из CDN, прослушиватель событий, похоже, не запускается. Пример можно увидеть в этом JSFiddle. Почему мой код не работает при включении в качестве ресурса из CDN в JSFiddle?

n.b.: Я не думаю, что с моим кодом что-то не так, поскольку он работает везде, кроме JSFiddle (уменьшенный или нет), но для полноты картины вот мой код:

HTML

 <button data-collapsible-target="collapsible-close">Toggle me</button>
<div class="collapsible-close" data-close-on-click-outside>
    This *should* close when clicked outside...
</div>

JS

 document.addEventListener('click', (event) => {

  const element = event.target;
  const targetSelector = element.getAttribute('data-collapsible-target');

  if (targetSelector !== null) {
    toggleCollapse(targetSelector);
  }
}, false);

const toggleCollapse = targetSelector => {
  const targets = document.querySelectorAll('.'   targetSelector);
  targets.forEach(target => {
    if (!target.classList.contains('collapsible-show')) {
      target.style.maxHeight = target.scrollHeight   'px';
    } else {
      target.style.maxHeight = 0   'px';
    }
    target.classList.toggle('collapsible-show');
  });
}

const closeOnClickOutsideElements = document.querySelectorAll('[data-close-on-click-outside]');
closeOnClickOutsideElements.forEach(element => hideOnClickOutside(element))

function hideOnClickOutside(element) {
  const outsideClickListener = event => {
    // Third checks if the element clicked isn't the toggler, which would result in a double click event that conflict each other.
    if (!element.contains(event.target) amp;amp; isVisible(element) amp;amp; !element.classList.contains(event.target.getAttribute('data-collapsible-target'))) {
      element.classList.remove('collapsible-show')
      element.style.maxHeight = 0;
    }
  }
  document.addEventListener('click', outsideClickListener)
  const isVisible = elem => !!elem amp;amp; !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length) // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
}

Редактировать: понял это, см. Ответ ниже.

Комментарии:

1. Вы получаете какие-либо ошибки CORS?

2. @evolutionxbox, ошибок CORS нет. Скрипт также загружен (переключение работает), просто прослушиватель событий, похоже, не работает.

Ответ №1:

JSFiddle загружает ресурс в <head> файле. Этот ресурс работает, если он добавлен в конце <body> , перед закрывающим тегом </body> . Я мог бы изменить сценарий, обернув его, document.addEventListener("DOMContentLoaded", function() {}); если бы хотел иметь возможность использовать его, когда он включен в <head> документ.