停止传播一个元素，但不是它的孩子？

I have a $(document).click() event to close a sidebar element, which I am stopping event propagation on to make it intractable, but within that sidebar is an anchor that I want to respond to the .click() event and close the sidebar element, but I'm not sure how to do this.

我有一个$（document）.click（）事件来关闭一个侧边栏元素，我正在停止事件传播以使其难以处理，但在该侧边栏中是一个我想要响应.click（）事件的锚点关闭侧边栏元素，但我不知道该怎么做。

My HTML code

我的HTML代码

  <nav class="sidebar">
      <li class="close"><a><span class="fa fa-close">&nbsp;</span>Close</a></li>
      <a><li class="menu">Explore</li></a>
      <a><li class="menu">Recent</li></a>
      <a><li class="menu">About</li></a>
      <a><li class="menu">Contact</li></a>
      <a class="signup"><li class="menu">Signup</li></a>
  </nav>

jQuery I am calling (var sidebar = $('.sidebar')):

我调用的jQuery（var sidebar = $（'。sidebar'））：

var clickout = function() {
  $(document).click(function() {
      sidebar.removeClass('active');
      sidebar.animate({
        left: '-300px'
      }, 200, 'easeInOutCubic');
  });

    sidebar.click(function(e){
      e.stopPropagation();
    });
};

2 个解决方案

#1

First try to slove it without javascript. Use css3 ... provides such animation effects. link

首先尝试在没有javascript的情况下解决它。使用css3 ...提供这样的动画效果。链接

Second give your navbar an id="sidebar" In jQuery change to:

第二步给你的导航栏一个id =“sidebar”在jQuery中更改为：

var sidebar = $('#sidebar')

Further write:

进一步写：

sidebar.click(function(e){
    e.stopPropagation;
});

In case you don't want an instant call on this function.

如果您不想在此功能上进行即时通话。

#2

first of all. Put the anchor inside the li tag

首先。将锚放在li标签内

<nav class="sidebar">
  <li class="close"><a><span class="fa fa-close">&nbsp;</span>Close</a></li>
  <li class="menu"><a>Explore</a></li>
  <li class="menu"><a>Recent</a></li>
  <li class="menu"><a>About</a></li>
  <li class="menu"><a>Contact</a></li>
  <li class="menu"><a class="signup">Signup</a></li>
</nav>

then below the sidebar.click.. add the ff

然后在sidebar.click下面..添加ff

$('a',sidebar).click(function(e){
  e.stopPropagation();
});

means it will search all anchors inside your sidebar and stops the parents event.

意味着它将搜索侧边栏内的所有锚点并停止父母事件。

#1