[SOLVED] [javascript] Question on stopPropagation()

Michael Uplawski · 01-07-2023, 01:30 AM

BAD EXAMPLE below. Solved for the time

Historic posting (ignore):

The frequent warnings on using stopPropagation() in actual code do not concern me. Thank you.

This said ...

Good morning.

An example page will follow: I observe that an event is propagated anyway to the enclosing structures, even if event.stopPropagation(); had been called, although there is no execution of code after the point where I establish the fact.

It appears that I miss some subtlety about this part of event-handling. My current interpretation is that the event is propagated alright, though ignored, probably because of a flag.., an attribute or something, set by stopPropagation().

The function should have been named more appropriately “markAsNegligible()”, in my opinion.

In the example, to make the facts obvious, just comment in the two calls to alert. Otherwise, you can click anywhere on the page, if you happen to hit the “[..]” a list may show up or not.

Question: Is the event propagated or is it not?

Example:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Created with nothing -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "vi - Vi Improved, a programmer's editor; HTML Tidy for HTML5 for Linux version 5.9.20" />
  <meta http-equiv="Content-Script-Type" content=
  "text/javascript" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Type" content=
  "text/html; charset=utf-8" />
  <meta name="revisit-after" content="30 days" />
  <title>StopPropagation Incomprehension Demonstration</title>
  <style type="text/css" xml:space="preserve">
    /*<![CDATA[*/
    <!-- -->
   /*]]>*/
  </style>
  <script type="text/javascript" xml:space="preserve">
    //<![CDATA[

    // hides all
    function hide_all() {
// ---------- This should work selectively
      // alert('hide_all');
// ----------------
      var lists = document.getElementsByTagName('ul');  
      for (var o = 0; o < lists.length; ++o) {
        ul = lists[o];
        hide(ul);
      }
    }

    // toggles one
    function toggle(ele_id) {
      // alert("toggle");
// ------------------ HERE -----------
      event.stopPropagation();
// -----------------------------------
      hide_all();
      var ele = document.getElementById(ele_id);
      if(ele ) {
        if( ele.style.display && ele.style.display == "block" ) {
          hide(ele);
        }
        else {
          show(ele);
        }
      }
    }

    // guess
    function show(ele) {
      ele.style.display="block";
    }

    // guess
    function hide(ele) {
        ele.style.display="none";
    }

   //]]>
  </script>
</head>
<body onload="hide_all();">
  <div style="height:400px;background-color:#f0f000;" onclick="hide_all();">
    <div>
      One List: <span onclick="toggle('id1');" style=
      "color:#0000a0;">[...]</span>
    </div>
    <ul id="id1">
      <li>One Item</li>
      <li>Another Item</li>
      <li>Stuff</li>
      <li>Krempel</li>
    </ul>
    <div>
      Other List: <span onclick="toggle('id2');" style=
      "color:#0000a0;">[...]</span>
    </div>
    <ul id="id2">
      <li>second list One Item</li>
      <li>second list Another Item</li>
      <li>second list Stuff</li>
      <li>second list Krempel</li>
    </ul>
  </div>
</body>
</html>

sundialsvcs · 01-07-2023, 01:34 PM

I suppose that they simply chose the word, "stopPropagation," fairly arbitrarily.

You should call this method when your code has both "handled" the event and "quashed" it – entirely handled it – such that no outer-level handler need be concerned with it, and therefore should not be exposed to it.

Event processing is designed to "bubble up." Each handler in this heirarchy, upon being presented with an event, is entitled to presume that it needs to be involved. If you are certain that the event should no longer "percolate," you must stop it from bubbling. ("Don't bother The Boss™ unless you really need to ...")

Michael Uplawski · 01-07-2023, 05:52 PM

Quote:

Originally Posted by sundialsvcs

I suppose that they simply chose the word, "stopPropagation," fairly arbitrarily.

It seems to express the intention quite well. I was simply lead astray, when I tried to construct a page to demonstrate my problem with the function. Although I have not at all understood, why some onclick handlers were called when I did not want them to, I know now that I do not need stopPropagation() and also, that my example from above is faulty.

The authentic page which I had to improve, is this one. The JavaScript functions have evolved, all works without a call to stopPropagation(). My “solution” was probably the reorganization of function calls.

Quote:

You should call this method when your code has both "handled" the event and "quashed" it – entirely handled it – such that no outer-level handler need be concerned with it, and therefore should not be exposed to it.

That is the reason why I believed that I must prevent subsequent onclick-handlers from execution: A block-element <div/> is shown due to a click, but after that, any click, inside *or* outside of the same <div/> must make the element disappear again. I was overthinking at that point.

stopPropagation() was quite simple unnecessary where I had put it, first.

sundialsvcs · 01-09-2023, 10:51 AM

The key concept to understand is that of "bubbling up." The event is automatically presented ("propagated") in a systematic fashion to multiple possibly-interested targets, generally "bubbling up from the inside out." Unless you tell it to stop.

This can be very handy, because sometimes multiple parties are interested to know, perhaps for different reasons, that a particular event has just happened. Similar logic happens in most languages for "exceptions," although this is not the same as "events."

Michael Uplawski · 01-09-2023, 02:20 PM

TY for the information.

My own difficulty was probably – similar to the glitch in my example, above – created by calling one handler-method from another. I have mis-interpreted my observations. A downright “programming-problem” did not exist.

I still prefer putting my own capacities into question and my biggest mistake was to dump the mess into the OP.

It helped me, though, to reset my brain.