Can I stop event propagation on certain function?

Question

I have some DIVs, and other developer bind them a click event name fn_propagation.

And now I want to add a new function to them name fn_stoppropagation.

The problem is when I call e.stopPropagation() in fn_stoppropagation, it will stop event propagation in fn_propagation too.

How can I keep event propagation in fn_propagation but stop propagation in my added function? ( I know add event to each DIV by ID and stop use stopPropagation() can do this, but i don't think it's a good way. )

fiddle : http://jsfiddle.net/android/3GurB/2/

HTML:

<div id='div1'>
    <div id='div2'>
        <div id='div3'>
            Click Me
        </div>
    </div>
</div>

JS:

$('div').click(fn_propagation)      // Other developer add this event
        .click(fn_stoppropagation); // What I going to add.

// I want to keep propagation of this function 
function fn_propagation(){
    alert('propagation '+$(this).attr('id')+' called');
    $(this).toggleClass('green');
}

// But stop propagation of this function
function fn_stoppropagation(e){
    alert('stoppropagation '+$(this).attr('id')+' called');
    e.stopPropagation();
}

When Click Me is clicked, expect output:

   propagation div3 called     // called
   stoppropagation div3 called // called
   propagation div2 called     // expected, but NOT called, 
   propagation div1 called     // expected, but NOT called, 

Thank you.

Answer 1

Propagation happens in the DOM, it can only be on or off for the whole element, not for a specific event handler.

My suggestion: compare the current element with the click target:

function fn_stoppropagation(e){
  if (this===e.target) {
    // the following will only run for the target, not its ancestors
    alert('stoppropagation '+$(this).attr('id')+' called');
  }
}