jQuery点击事件目标填充 [英] jQuery click event target padding

问题描述

这是一个 jsFiddle ，以帮助看到它。

我试图获得点击打开菜单什么都不做任何事情，而任何其他地方的点击将关闭所有的菜单。它的效果很好，但最大的问题是如果您点击< li> 上方，但仍在< div> 它失败。似乎这个填充不算作div或某些东西的一部分。

代码也在这里：

HTML

 < a href =＃mainMenuclass = menuLink>主< / A> 
< div id =mainMenuclass =menu> 
< ul> 
< li class =menuItem>< a href =＃>项目1< / a> 
< / li> 
< li class =menuItem>< a href =＃>项目2< / a> 
< / li> 
< li class =menuItem>< a href =＃>项目3< / a> 
< / li> 
< li class =menuItem>< a href =＃>项目4< / a> 
< / li> 
< li class =menuItem>< a href =＃>项目5< / a> 
< / li> 
< / ul> 
< / div> 
< a href =＃menuTwoclass =menuLink>菜单2< / a> 
 
< div id =menuTwoclass =menu> 
< ul> 
< li class =menuItem>< a href =＃>项目1< / a> 
< / li> 
< li class =menuItem>< a href =＃>项目2< / a> 
< / li> 
< li class =menuItem>< a href =＃>项目3< / a> 
< / li> 
< li class =menuItem>< a href =＃>项目4< / a> 
< / li> 
< li class =menuItem>< a href =＃>项目5< / a> 
< / li> 
< / ul> 
< / div> 
  

JS

  $（document）.ready（function（）{
 //为文档附加点击处理程序
 $（document）.on（click ，function（e）{
 //获取点击的目标并转换为$对象
 $ target = $（e.target）; 
 //了解点击是否发生在一个菜单
 $ parents = $ target.parents（。menu）; 
 if（$ parents.length> 0）{
 console.log（[菜单点击 e]）; 
 return; 
} else {
 //如果不在菜单上关闭打开的菜单
 console.log（[非菜单单击，e]）; 
 $（'。menu'）。hide（）; 
} 
}）; 
 
 //显示菜单的句柄
 $（'。menuLink'）。on（click，function（e）{
 //关闭所有其他菜单
 $（'。menu'）hide（）; 
 console.log（Started）; 
 e.stopPropagation（）; 
 e.preventDefault（）; 
 var targetMenu = $（e.target）.attr（href）; 
 $（targetMenu）.show（）; 
}）; 
  

}）;

CSS

  #mainMenu {
 background-color：lightblue; 
} 
 #menuTwo {
 background-color：lightgreen; 
} 
 .menu {
 display：none; 
 border：1px solid black; 
} 
  

解决方案

：

  $ parents = $ target.parents（。menu）; 
  

将其更改为：

  $ parents = $ target.closest（。menu）; 
  

div没有一个父类，具有类 .menu ，所以如果你点击，它没有找到任何东西。 最接近在搜索中包含所选元素。

http://jsfiddle.net/ecnGr/

I am trying to register clicks using jQuery and there seems to be an issue with the padding.

Here's a jsFiddle to help with seeing it.

I'm trying to get clicks on an open menu to do nothing while clicks anywhere else will close all the menus. It works well, but the biggest problem is if you click above the <li> but still within the <div> it fails. It seems to be that the padding isn't counted as part of the div or something.

The code is here as well:

HTML

<a href="#mainMenu" class="menuLink">Main</a>
<div id="mainMenu" class="menu">
    <ul>
        <li class="menuItem"><a href="#">item 1</a>
        </li>
        <li class="menuItem"><a href="#">item 2</a>
        </li>
        <li class="menuItem"><a href="#">item 3</a>
        </li>
        <li class="menuItem"><a href="#">item 4</a>
        </li>
        <li class="menuItem"><a href="#">item 5</a>
        </li>
    </ul>
</div>
<a href="#menuTwo" class="menuLink">Menu 2</a>

<div id="menuTwo" class="menu">
    <ul>
        <li class="menuItem"><a href="#">item 1</a>
        </li>
        <li class="menuItem"><a href="#">item 2</a>
        </li>
        <li class="menuItem"><a href="#">item 3</a>
        </li>
        <li class="menuItem"><a href="#">item 4</a>
        </li>
        <li class="menuItem"><a href="#">item 5</a>
        </li>
    </ul>
</div>

JS

$(document).ready(function () {
    //Attach a handler to the document for clicks.
    $(document).on("click", function (e) {
        //Get the click's target and convert to $ object.
        $target = $(e.target);
        //Find out if the click occurred on a menu.
        $parents = $target.parents(".menu");
        if ($parents.length > 0) {
            console.log(["Menu click", e]);
            return;
        } else {
            //If it wasn't on a menu close the open menu.
            console.log(["Non-menu click", e]);
            $('.menu').hide();
        }
    });

    //Handle showing the menu.
    $('.menuLink').on("click", function (e) {
        //Close all other menus.
        $('.menu').hide();
        console.log("Started");
        e.stopPropagation();
        e.preventDefault();
        var targetMenu = $(e.target).attr("href");
        $(targetMenu).show();
    });

});

CSS

#mainMenu {
    background-color: lightblue;
}
#menuTwo {
    background-color: lightgreen;
}
.menu {
    display: none;
    border: 1px solid black;
}

解决方案

Your problem is with this line:

$parents = $target.parents(".menu");

Change it to this:

$parents = $target.closest(".menu");

The div doesn't have a parent with the class .menu, so if you click that, it doesn't find anything. closest includes the selected element in the search.

http://jsfiddle.net/ecnGr/

这篇关于jQuery点击事件目标填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！