Question

如果你点击li中的任何地方，我试图运行一个函数，除了特定的按钮（在这种情况下会发生其他事情）。看起来我应该使用.not或：not，但尝试以下任何一种都会导致错误并阻止函数的执行。

修改：已添加jsfiddle Demo 该代码遵循Blender的建议，通过切换实时＆gt;开启并使用他的语法，但这并没有解决问题。

使用Javascript：

$('#currentThread').on('click', 'li:not(.chromeElement)', function () {
    $(this).find('.hiddenChrome').slideToggle();
});

HTML：

<div id='thunderdome'>
    <section id='middle'>
        <ul id='currentThread'>
            <li class="c1L9zObS">
                <article>
                    <img src="http://www.gravatar.com/avatar/ae7238730d03d6da0df35cd8a96ee4dc?d=identicon" class="userPic">
                    <p class="body">foo reply to op</p>
                </article>
                <p class="byline">By <span class="user">raurus</span><span class="timestamp">; Posted a while ago</span><span class="context">2 Tangents</span>
                </p>
                <div class="hiddenChrome" style="display: none;">
                    <div class="chromeElement star">
                        <p>Star</p>
                    </div>
                    <div class="chromeElement report">
                        <p>Report</p>
                    </div>
                    <div class="chromeElement delete">
                        <p>Delete</p>
                    </div>
                    <div class="chromeElement edit">
                        <p>Edit</p>
                    </div>
                    <div class="chromeElement vote unvoted isLoggedIn"></div>
                </div>
                <hr>
            </li>
        </ul>
    </section>
</div>

目标是你可以点击li上的任何地方，它会展开以显示你.hiddenChrome

问题是单击.chromeElement会导致第一个函数执行，而.hiddenChrome会切换回来。我想让它点击任何/但是/ .chromeElement会导致函数执行。

我不想使用.slideDown（），因为切换是一种理想的行为。

Answer 1

前两个示例没有右括号：

$('li').not('.chromeElement').live('click', function(){
  foo
});
 ^


$('li:not(.chromeElement)').live('click', function(){
  foo
});
 ^

此外，jQuery 1.9及更高版本中已删除.live()。将其替换为.on()：

$(document).on('click', 'li:not(.chromeElement)', function() {
    foo();
});

将document更改为最近的非动态创建的父元素的选择器。

Answer 2

您可以像这样使用on来获得与问题

相匹配的更简洁的授权

$('#currentThread').on('click', 'li:not('.chromeElement)'), function(){ 
    foo();
});

但是，您要问的是当孩子发生事件时，在父母上停止事件。我想你需要做两件事：

如果你排除了孩子，那么事件仍然会触发父项和它占据的任何“空间”（包括它的孩子），所以在你要排除的项目上放置一个事件处理程序并在逻辑上排除它事件触发时
使用逻辑来检测事件开始的项目并终止处理程序。

     $('#currentThread').on('click', 'li, .chromeElement', function (e) {
         var $this = $(this);
         if ($this.closest('.chromeElement').length > 0) {
         // if the click occurs on a chromeElement member then bail
             return false;
         } else {
             $this.find('.hiddenChrome').slideToggle();
         }
     });

your fiddle modified

$（这个）除了特定的孩子

2 个答案: