[js] 阻止中键关闭任何页签或钉住的页签

效果是避免不小心中键点击页签从而关闭文档。

JS 代码片段：

注意：开头有个变量，为 true 时阻止所有页签的中键，为 false 时阻止钉住页签的中键

2.0 版本（更简洁，性能更好）：

// 阻止中键关闭任何页签或钉住的页签 2.0 JS片段
// author by JeffreyChen https://ld246.com/article/1728321288261
(function() {
    const applyToAllTabs = true; // true: 阻止所有页签 | false: 仅阻止钉住页签
    const targetSelector = applyToAllTabs 
        ? '.layout-tab-bar:not(.layout-tab-bar--readonly) .item' 
        : '.layout-tab-bar:not(.layout-tab-bar--readonly) .item--pin';

    document.addEventListener('mousedown', function(event) {
        if (event.button !== 1) return; // 仅处理中键点击
      
        const targetElement = event.target.closest(targetSelector);
        if (!targetElement) return;
      
        // 阻止默认行为和事件传播
        event.preventDefault();
        event.stopPropagation();
    }, true); // 使用捕获阶段确保早期拦截
})();

1.0 版本：

// 阻止中键关闭任何页签或钉住的页签 1.0 JS片段
// author by JeffreyChen https://ld246.com/article/1728321288261
(function() {
    const applyToAllTabs = true; // 变量：为 true 时阻止所有页签的中键，为 false 时阻止钉住页签的中键
    const targetSelector = applyToAllTabs 
        ? '#layouts .layout__center div:not(.fn__none) > .layout-tab-bar:not(.layout-tab-bar--readonly) .item' 
        : '#layouts .layout__center div:not(.fn__none) > .layout-tab-bar:not(.layout-tab-bar--readonly) .item--pin';

    const targetContainer = document.querySelector('#layouts');
    const observerConfig = { childList: true, subtree: true };

    function handleClick(event) {
        if (event.button !== 1) return;

        const targetElement = event.target.closest(targetSelector);
        if (!targetElement) return;

        event.preventDefault();
        event.stopPropagation();
    }

    function attachListener(element) {
        if (!element.dataset.listenerAttached) {
            element.addEventListener('mousedown', handleClick, true);
            element.dataset.listenerAttached = 'true';
        }
    }

    function detachListener(element) {
        if (element.dataset.listenerAttached) {
            element.removeEventListener('mousedown', handleClick, true);
            delete element.dataset.listenerAttached;
        }
    }

    function checkAndSetupListeners() {
        const elements = document.querySelectorAll('#layouts .layout__center div:not(.fn__none) > .layout-tab-bar:not(.layout-tab-bar--readonly)');
        elements.forEach(attachListener);
    }

    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            // Check for added nodes
            mutation.addedNodes.forEach(node => {
                if (node.matches && node.matches('.layout-tab-bar:not(.layout-tab-bar--readonly)')) {
                    attachListener(node);
                } else if (node.querySelectorAll) {
                    node.querySelectorAll('.layout-tab-bar:not(.layout-tab-bar--readonly)').forEach(attachListener);
                }
            });

            // Check for removed nodes
            mutation.removedNodes.forEach(node => {
                if (node.matches && node.matches('.layout-tab-bar:not(.layout-tab-bar--readonly)')) {
                    detachListener(node);
                } else if (node.querySelectorAll) {
                    node.querySelectorAll('.layout-tab-bar:not(.layout-tab-bar--readonly)').forEach(detachListener);
                }
            });
        });
    });

    observer.observe(targetContainer, observerConfig);

    // 初始化时设置监听
    checkAndSetupListeners();
})();

其他相关

[css] 显示钉住文档名并在页签右下角添加一个钉子图标