jQuery将函数绑定到父div，但不绑定子锚，反之亦然

Question

I have a div, inside of which are a few anchor links:

<div id="myDiv">
+----------------------------+
|                            |
|  <a class="myAnc">...</a>  |
|  <a class="myAnc">...</a>  |
|                            |
+----------------------------+

I want to bind a click event to #myDiv that calls myFunction1() but have .myAnc tags call myFunction2() . Using jQuery's bind , what happens is that both myFunction1 and myFunction2 are called no matter what you click on (the div or the anchor).

How can I make sure that they call on their two separate functions (and only those functions)?

Answer 1

在myFunction2(ev)调用中：

ev.stopPropagation();

Answer 2

Try this:

$("a.myAnc").click(function(e) {
   e.stopPropagation(); // prevent DOM event bubbling which will trigger the click of the parent div
});

$("#myDiv").click(function() {
});

Answer 3

$('#myDiv, a.myAnc').click(function(event) {
   event.stopPropagation(); // Prevent bubbling to #myDiv

   alert('you click  ' + $(this));
});

Answer 4

Try

$(".myAnc").bind("click",
                         function()
                         {
                             myFunction2();
                             return false;
                         }
                        );

    }

Working demo @ http://jsfiddle.net/NeLsE/