为什么 jQuery :not selector 属性不适用于这种情况？

Question

I have following code which works as expected:

First Approach

 $('ul').on('click', function(e) { $(this).append('<li>foo</li>'); }) .on('click', 'li', function(e) { e.stopPropagation(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>A</li> <li>B</li> <li>C</li> </ul>

What it does is simple:

• It adds one li element when any bullet point is clicked
• Ignores any click inside li elements

I'm cool with that is the behavior I want. With this approach It seems like bullet points are not part of the li elements because any click performed on the bullet points are not going trough the second function.

My problem raised after I thought that I could refactor the javascript code a little bit, passing it a ":not(li)" selector as parameter in the first call.

Second Approach :

 $('ul').on('click', ":not(li)", function(e) { $(this).append('<li>foo</li>'); });

But it turned out that is behaving different, I don't understand why is not adding li elements after bullet points are clicked.

Second approach looks cleaner but opposite of what we saw in the first approach, is like the bullets point were part of the li elements.

-Why the second approach is behaving different?

Answer 1

It's because ul :not(li) will select any descendants of a ul that is not a li element.

Since your ul element only contains li elements, the event never gets fired. However, if the li elements contained a span element, the event would get fired when clicking on the span element, but that isn't the desired result.

Rather than suppressing the event when clicking on an li element, I'd simply suggest checking if this is equal to e.target . This is similar to your first example.

 $('ul').on('click', function(e) { if (this === e.target) { $(this).append('<li>foo</li>'); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>A</li> <li>B</li> <li>C</li> </ul>