如何解决两个事件之间的冲突，单击“外部”和“按钮”关闭svelte中的菜单？

Question

我在svelteKit中遇到了一个碰撞问题。按钮打开菜单，但当我试图关闭它时，它没有打开。当我单击按钮外部时，这会触发调用handleClickOutside的clickOutside.js，然后关闭菜单。

我认为问题在于element.contains包含了按钮，因此菜单没有关闭。

然而，我无法修复它。

我用的是tailwindUI，tailwindCSS，SvelteKit。

index.svelte

<script>
    // @ts-nocheck
    import bostonLogo from '../../img/bostonLogo.png';
    import { clickOutside } from '../../lib/clickOutside';

    // Example Profile
    let profile = {
        name: 'Matias',
        lastName: 'Barletta'
    };

    // Show/Hide Menu

    let menu = false;

    // COLLISION WITH HANDLENAV
    
    function handleClickOutside(event) {            
        menu = false;   
    }

    function handleNav() {

        menu = !menu;
        
    }

</script>

<div>
    <!-- Static sidebar for desktop -->
    <div class=" md:flex md:w-64 md:flex-col md:fixed md:inset-y-0" class:hidden={!menu}>
        <!-- Sidebar component, swap this element with another sidebar if you like -->
        <div
            use:clickOutside
            on:click_outside={menu? handleClickOutside : ''}
            class:absolute={menu}
            class:mt-11={menu}
            class="md:flex-1 md:flex md:flex-col md:min-h-0 bg-gray-800"
        >
...

clickOutside.js

// @ts-nocheck
/** Dispatch event on click outside of element */
// @ts-ignore

export function clickOutside(element) {
    // @ts-ignore

    const handleClick = (event) => {
        console.log(event.target, document.body)
    
        // element exist?, element contain where i did click, preventDefault = false?
        if (element && !element.contains(event.target) && !event.defaultPrevented) {
            element.dispatchEvent(
                // Dispatch and create new custom event.
                new CustomEvent('click_outside', element)
            );
        }
    };
    // add eventlistener when you click on document
    document.addEventListener('click', handleClick, true);

    return {
        destroy() {
            document.removeEventListener('click', handleClick, true);
        }
    };
}

Answer 1

不久前我也遇到过同样的问题。我的解决方案是在菜单打开时忽略菜单单击。你已经有了这个：on:click_outside={menu? handleClickOutside : ''}。

所以现在如果菜单关闭了，操作就不会启动。如果菜单是打开的，菜单按钮就不会启动。所以总是有一个回调被调用。

function handleNav() {
    if (menu) return;
    menu = !menu;
}

作为另一种选择，您可以向操作添加选项，以便如果目标位于被忽略的选择器列表中(而不仅仅是它所在的元素)，则handleClick函数可以忽略单击。

更新

这里的另一种方法是使用工作REPL。

我们要做的是在菜单按钮中添加一个ID

<button
  id="menu-button"
  type="button"
  value="button"
  class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
  on:click={handleNav}
  >...</button>

然后，我们将ID作为参数添加到use:clickOutside操作中：

<div
  use:clickOutside={{ignore: 'menu-button'}}
  on:click_outside={menu? handleClickOutside : ''}
  class:absolute={menu}
  class:mt-11={menu}
  class="md:flex-1 md:flex md:flex-col md:min-h-0 bg-gray-800"
  >
  <div class="h-40 w-40 bg-slate-600 p-3 text-white">
    Some menu content here
  </div>
</div>

然后在操作中，我们通过ID获取元素，并检查是否在其中。

const handleClick = (event) => {
  event.preventDefault();
  
  // This function kinda rearranged with early returns to take the new parameter into account.
  if (!element) return;
  if (element.contains(event.target)) return;
  
  //Get the element based on the id we gave in the params
  const ignore = document.getElementById(opts.ignore)
  //Check that we're not clicking in the button.
  if (ignore.contains(event.target)) return;
  
  element.dispatchEvent(
    // Dispatch and create new custom event.
    new CustomEvent('click_outside', element)
  );
};