#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>
документ.