Neglect a function in JavaScript?

Question

When I click mainDiv, the function mainDiv() will be invoked, when I click subDiv, both mainDiv() and subDiv() functions are invoked.

I want to invoke only the subDiv() function when I click subDiv. How can I achieve this?

CODE:

<div onclick="mainDiv()">
  show main div
  <div onclick="subDiv()">
    show sub div
  </div>
</div>
<script type="text/javascript">
  function  mainDiv(){
    alert("main div is clicked");
  }
  function  subDiv(){
    alert("sub div is clicked");
  }
</script>

Denys Séguret · Answer 1 · 2013-03-07T12:25:47.283

3

You might use stopPropagation in all browsers except IE8 (and older ones from the same company). But if you want to be compatible, you should use the solution described in quirksmode :

   <div onclick="subDiv(event)">

   function  subDiv(e){
     e.cancelBubble = true;
     if (e.stopPropagation) e.stopPropagation();
     alert("sub div is clicked");
   }

Demonstration

edited Mar 07 '13 at 12:25

answered Mar 07 '13 at 12:16

Denys Séguret

372,613
87
782
758

With inline events he won't have the event object available as a parameter. – ThiefMaster Mar 07 '13 at 12:17

bipen · Accepted Answer · 2013-03-07T12:34:47.870

3

use e.stopPropogation()

HTML

<div onclick="subDiv(event)">  //<--- pass event parameter

javascrip

function  subDiv(e){    

   if(e.stopPropagation){  // check stoppropogation is avilable
      e.stopPropagation();  //use stopPropogation
   }else{
      e.cancelBubble = true;  // for ie8 and below
   }
   alert("sub div is clicked");
}

edited Mar 07 '13 at 12:34

answered Mar 07 '13 at 12:18

bipen

36,319
9
49
62

stopPropagation isn't available in IE8. – Denys Séguret Mar 07 '13 at 12:21
I did not tested in IE8,In other browsers are working will,I hope same will be happen in case of IE8,thank you :) – shihabudheen Mar 07 '13 at 12:38
no worries... it will... anyways thanks... gald that it helped... happy coding.. :) – bipen Mar 07 '13 at 12:40

score 1 · Answer 3 · answered Mar 07 '13 at 12:23

<script type="text/javascript">
function mainDiv() {
    alert("main div is clicked");
}
function subDiv(e) {
    if (!e)
        e = window.event;

    //IE9 & Other Browsers
    if (e.stopPropagation) {
        e.stopPropagation();
    }
    //IE8 and Lower
    else {
        e.cancelBubble = true;
    }
    alert("sub div is clicked");

}

karthick · Answer 4 · 2013-03-07T12:26:18.023

0

Try this

    <div onclick="mainDiv()">
      show main div
      <div onclick="subDiv(event);">
        show sub div
      </div>
    </div>
    <script type="text/javascript">
      function  mainDiv(){
        alert("main div is clicked");
      }
      function  subDiv(arg){
        arg.stopPropagation();
        alert("sub div is clicked" + arg);

      }
</script>

To support IE 8 and lower use arg.cancelBubble

edited Mar 07 '13 at 12:26

answered Mar 07 '13 at 12:20

karthick

11,998
6
56
88

stopPropagation isn't available in IE8. – Denys Séguret Mar 07 '13 at 12:22
use cancelBubble() for ie8 and lower – karthick Mar 07 '13 at 12:25

Neglect a function in JavaScript?

4 Answers4