一键解决halo博客评论组件表情被遮挡的BUG
还是老方法在页脚注入以下代码,将表情改为往上弹出
<script>
document.querySelector('#content-inner').addEventListener('click', function handleClick(event) {
if (event.target.tagName.toLowerCase() === 'comment-widget') {
console.log("Emoji button clicked!");
// 获取表情面板的元素
const commentWidget = document.querySelector('comment-widget');
if (commentWidget && commentWidget.shadowRoot) {
const emojiButton = commentWidget.shadowRoot
.querySelector('comment-form')
.shadowRoot.querySelector('base-form')
.shadowRoot.querySelector('.form__actions')
.querySelector('emoji-button');
if (emojiButton && emojiButton.shadowRoot) {
const emojiPanel = emojiButton.shadowRoot.querySelector('.form__emoji-panel');
if (emojiPanel) {
// 移除点击事件监听器,避免重复设置观察器
document.querySelector('#content-inner').removeEventListener('click', handleClick);
// 创建 MutationObserver 监听 style 属性的变化
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'style') {
// 检查是否是 top 属性发生变化
const topValue = window.getComputedStyle(emojiPanel).top;
if (topValue !== '-22em') {
emojiPanel.style.top = '-22em';
console.log("Top style updated to -22em.");
}
}
});
});
// 监听 emojiPanel 的 style 属性变化
observer.observe(emojiPanel, {
attributes: true, // 监听属性的变化
attributeFilter: ['style'], // 仅监听 style 属性
});
// 初次设置 top 样式
emojiPanel.style.top = '-22em';
console.log("Initial top style set to -22em.");
}
}
}
}
});
</script>
- 感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 余劫于人间渡
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果