InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Javascript

    Javascript strings

    • Javascript - check if string is number
    • Javascript - parseInt
    • string ends with check
    • string starts with check

    Javascript Array

    • array forEach
    • array append item
    • array remove last item
    • array prepend item
    • array remove first item
    • create array from 0 to N-1
    • convert array to json string

    Javascript control flow

    • for-in loop to iterate over keys of javascript object

    Javascript DOM

    • Javascript - DOM appendChild example
    • Javascript - get computed style of an element
    • Javascript - how to view text inside DOM element
    • Javascript - img onload examples
    • Javascript - ready vs on load event handler example
    • Javascript - use querySelector to set dom element html
    • Javascript DOMContentLoaded listener example
    • Javascript event bubble vs capture
    • Javascript how to stop event propagation
    • Javascript onscroll event handler
    • Javascript onscroll event handler with throttling
    • Make an element draggable using Vanilla Javascript
    • Multiple onload handlers using vanilla Javascipt
    • Use universal selector to get all DOM nodes in vanilla Javascript
    • document querySelector examples
    • dump all handlers on window object

    Javascript Cookbook

    • Are Javascript functions objects?
    • Declare and invoke anonymous function
    • HTML5 drag and drop
    • JSLint on command line on Ubuntu
    • Javascript - call vs apply
    • Javascript - implement class using function
    • Javascript - iterate over function arguments
    • Javascript - print all methods of an object
    • Javascript - run a function at regular interval
    • Javascript - textarea and text input select all
    • Javascript arrow function examples
    • Javascript check if variable is defined
    • Javascript local and global variables
    • Javascript parse json string
    • Javascript prototype examples
    • Javascript settimeout example
    • Javascript sleep implementation
    • Requirejs - quickstart guide for beginners
    • catch errors using window.onerror
    • print javascript object to log

    Javascript libraries

    • AngularJS
    • CasperJS
    • PhantomJS
    • React
    • jQuery

    Javascript global functions

    • Javascript - Number function
     
    • Home
    • > Tutorials
    • > Javascript

    Javascript how to stop event propagation

    on Feb 16, 2016

    Javascript/HTML event can be handled by more than one dom elements and after one handler, it propagate to next element. API Event.stopPropagation() can be used to stop propagation of an event. It is best to avoid using stopProgation API as there might be other libraries on page which can get affected by this. In addition it is error prone.

    Here is an example on how to use stop propagation. Here outer and two inner divs are listening to click event. One For inner1 div, we are using stopPropagation. So we we click on inner1 div, event is not propagated to outer div.

    <div class="outer"><div class="inner1">click here (with stopPropagation)</div>
    <div class="inner2">click here (without stopPropagation)</div></div>
    <div id="msg"></div>
    
    <script type="text/javascript">
    document.querySelector("div.outer").addEventListener("click", outer_click, false);
    document.querySelector("div.inner1").addEventListener("click", inner1_click, false);
    document.querySelector("div.inner2").addEventListener("click", inner2_click, false);
    function outer_click(e) {
      document.querySelector("#msg").innerHTML += "In outer_click<br/>";
    }
    function inner1_click(e) {
      document.querySelector("#msg").innerHTML += "In inner1_click<br/>";
      e.stopPropagation();
    }
    function inner2_click(e) {
      document.querySelector("#msg").innerHTML += "In inner2_click<br/>";
    }
    </script>
    refresh done
    try it online

    Suggested posts:

    1. Javascript event bubble vs capture
    2. Javascript onscroll event handler
    3. Javascript onscroll event handler with throttling
    4. view event handlers in Chrome
    5. Javascript – ready vs on load event handler example
    6. Make an element draggable using Vanilla Javascript
    7. How to trigger click using jQuery or Javascript
    8. Javascript/jQuery – disable right click
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged Javascript, Javascript DOM, Tutorials, Web Development

    Follow InfoHeap

    facebook
    twitter
    googleplus
    • Browse site
    • Article Topics
    • Article archives
    • Recent Articles
    • Contact Us
    • Omoney
    Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

    Copyright © 2022 InfoHeap.

    Powered by WordPress