LinuxQuestions.org
Welcome to the most active Linux Forum on the web.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 01-07-2023, 01:30 AM   #1
Michael Uplawski
Senior Member
 
Registered: Dec 2015
Location: Non. Je suis propriétaire – No. I am an owner.
Distribution: Apple-selling shops, markets and direct marketing
Posts: 1,443
Blog Entries: 37

Rep: Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753
[javascript] Question on stopPropagation()


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>

Last edited by Michael Uplawski; 01-07-2023 at 08:03 AM. Reason: -->, typos, stuff.
 
Old 01-07-2023, 01:34 PM   #2
sundialsvcs
LQ Guru
 
Registered: Feb 2004
Location: SE Tennessee, USA
Distribution: Gentoo, LFS
Posts: 10,101
Blog Entries: 4

Rep: Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662
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 ...")

Last edited by sundialsvcs; 01-07-2023 at 01:40 PM.
 
Old 01-07-2023, 05:52 PM   #3
Michael Uplawski
Senior Member
 
Registered: Dec 2015
Location: Non. Je suis propriétaire – No. I am an owner.
Distribution: Apple-selling shops, markets and direct marketing
Posts: 1,443

Original Poster
Blog Entries: 37

Rep: Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753
Quote:
Originally Posted by sundialsvcs View Post
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.

Last edited by Michael Uplawski; 01-07-2023 at 05:55 PM.
 
Old 01-09-2023, 10:51 AM   #4
sundialsvcs
LQ Guru
 
Registered: Feb 2004
Location: SE Tennessee, USA
Distribution: Gentoo, LFS
Posts: 10,101
Blog Entries: 4

Rep: Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662Reputation: 3662
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."
 
Old 01-09-2023, 02:20 PM   #5
Michael Uplawski
Senior Member
 
Registered: Dec 2015
Location: Non. Je suis propriétaire – No. I am an owner.
Distribution: Apple-selling shops, markets and direct marketing
Posts: 1,443

Original Poster
Blog Entries: 37

Rep: Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753
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.
 
  


Reply

Tags
event-handling, javascript, nested tags., stoppropagation


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
LXer: JavaScript creator Eich's latest project: KILL JAVASCRIPT LXer Syndicated Linux News 0 06-18-2015 09:30 AM
Looking for Textbrowser with JavaScript Support or Elink Javascript Support rohezal Linux - Software 4 09-01-2009 02:02 PM
Ubuntu Edgy/Firefox 2/Javascript - Firefox closes accessing websites with Javascript Interdictor Ubuntu 8 11-02-2006 12:58 PM
Javascript question? mikeshn Programming 2 08-22-2002 04:44 PM
JavaScript Question vance Programming 2 04-14-2002 01:30 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 10:44 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration