logo
down
shadow

jQuery stopPropagation() on more than one child object


jQuery stopPropagation() on more than one child object

By : Skuld Wong
Date : November 17 2020, 11:52 AM
hop of those help? You can provide multiple CSS selectors. In your case looks like .trackInfo div contains play/pause buttons so the code will be
code :
.find('.trackPlayer, .trackInfo').click(function(e) {
    e.stopPropagation();
});


Share : facebook icon twitter icon
stopPropagation(); doesnt work to stop top of this child div

stopPropagation(); doesnt work to stop top of this child div


By : user3262554
Date : March 29 2020, 07:55 AM
this one helps. If you're saing that when the ".innerbox" div is clicked, you want to animate it, but you don't want the "#button" div to be animated, you'll have to move the "#button" div out of the ".innerbox" div, as a child element is going to be affected by animation on its parent.
stopPropagation is about stopping the event itself bubbling up to ancestor elements, not the effects of what you do. Certainly in that case, the click event is being stopped and not sent onto the ".innerbox" div.
jQuery + stopPropagation: Exclude child element from parent selector

jQuery + stopPropagation: Exclude child element from parent selector


By : Michael7279
Date : March 29 2020, 07:55 AM
will be helpful for those in need Just add an additional handler to the close button which also closes the window.
code :
$(".close").live('click',function(){
            $('#form-window').removeClass('show');
        });
stopPropagation of any child tags there are inside a parent tag

stopPropagation of any child tags there are inside a parent tag


By : isaacsesi
Date : March 29 2020, 07:55 AM
Any of those help How can I stopPropagation of any items there are inside of the div with the class stopPropagation? , Try this:
code :
$('.accordion-heading a').click(function(e)
{
  var shouldStop = $(this).closest('div').hasClass('stopPropagation');
  if(shouldStop === true)
  {
      e.preventDefault();
  }
});
$('.accordion-heading .stopPropagation').on('click', function(e)
{  
  var elem = $(e.target);
  var modal = elem.is('[data-toggle="modal"]') 
    ? elem 
    : (elem.closest('[data-toggle="modal"]').length === 1)
        ? elem.closest('[data-toggle="modal"]')
        : null;

  if(modal !== null)
  {
    $(modal.attr('data-target')).modal('show');  
  }
  e.stopImmediatePropagation();
});
event stopPropagation on div <a> child element

event stopPropagation on div <a> child element


By : user3386052
Date : March 29 2020, 07:55 AM
Does that help The problem is you are using event delgation, and live() will append the handler to the document object which means the event has already reached to top of the tree and there is no more to propagate
You need to bind the handler directly to the element if you want to stop the propagation
code :
$('#notif_msg a.message').click(function (event) {
    event.stopPropagation();
});
Vue stopPropagation not working - child to parent

Vue stopPropagation not working - child to parent


By : user1727518
Date : March 29 2020, 07:55 AM
To fix this issue I'm not familiar with the v-click-outside implementation, but "click outside" events are typically implemented by using event delegation on the document/body element, and so by that time the event has already propagated and cannot be stopped.
Here's a small example of what's going on:
code :
Vue.directive('click-outside', {
  bind(el, { value }) {
    el._handler = e => {
      if (!el.contains(e.target)) {
        value(e);
      }
    };
    
    document.addEventListener('click', el._handler);
  },
  
  unbind(el) {
    document.removeEventListener('click', el._handler);
  },
});

new Vue({
  el: '#app',
  methods: {
    onClick(e, color) {
      alert(`Clicked the ${color} box.`);
    },
    
    onClickOutside(e, color) {
      e.stopPropagation();
      alert(`Clicked outside of ${color} box.`);
    },
  },
});
.box { padding: 20px; }
.red { background-color: red; }
.yellow { background-color: yellow; }
.blue { background-color: blue; }
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <div class="box red" @click="onClick($event, 'red')">
    <div class="box yellow" @click="onClick($event, 'yellow')">
      <div class="box blue" @click="onClick($event, 'blue')" v-click-outside="e => onClickOutside(e, 'blue')">
      </div>
    </div>
  </div>
</div>
Vue.directive('click-outside', {
  bind(el, { value }) {
    el._handler = e => {
      if (!el.contains(e.target)) {
        value(e);
      }
    };
    
    // *** Using capturing ***
    document.addEventListener('click', el._handler, { capture: true });
  },
  
  unbind(el) {
    document.removeEventListener('click', el._handler, { capture: true });
  },
});

new Vue({
  el: '#app',
  methods: {
    onClick(e, color) {
      alert(`Clicked the ${color} box.`);
    },
    
    onClickOutside(e, color) {
      e.stopPropagation();
      alert(`Clicked outside of ${color} box.`);
    },
  },
});
.box { padding: 20px; }
.red { background-color: red; }
.yellow { background-color: yellow; }
.blue { background-color: blue; }
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <div class="box red" @click="onClick($event, 'red')">
    <div class="box yellow" @click="onClick($event, 'yellow')">
      <div class="box blue" @click="onClick($event, 'blue')" v-click-outside="e => onClickOutside(e, 'blue')">
      </div>
    </div>
  </div>
</div>
Related Posts Related Posts :
  • Mocha JS: How to reuse assertions within a spec?
  • Is ember.js stable enough to use in a real world project?
  • jQuery Load() not loading within div
  • encode stream from webCam h264
  • Regex to find pattern, return subpattern
  • Why does this regex to remove empty <p></p> tags from a string fail?
  • Rails: pass data to javascript
  • Quickest way to check if a number is in a set?
  • Phonegap events online/offline not working
  • In HTML5, please explain the meaning of '?' in the statement
  • Form to use AJAX rather than a page refresh but also utilise error handling?
  • JQuery Script looping error
  • different size divs align top left
  • Image fade-in when webpage finishes loading
  • Seeking HTML5 audio element causes delay (breaks sync)
  • How can I read & write data to a new tab in Firefox?
  • jQuery or JS turn all words into italic type
  • iOS css -webkit-transform: scale doesn't offset touch events
  • Populate select list using javascript
  • Can you work out why my .js file doesn't seem to be linking to my html?
  • Make slideToggle effect only one element at a time
  • Output sound using JavaScript
  • What is the analytics.js equivalent of _trackPageview found in ga.js
  • How can I check if a JS file has been included already?
  • hasClass and condition not working
  • EDITED: I'm having issues with a button and its function
  • Importing XML in HTML with javascript
  • Create new function in contentScriptFile in Firefox extension
  • Should I build Node.js from source or download the OS X installer?
  • How to enforce integer sizes in JS? (TypeScript?)
  • How to update the JSON object without deleting old values using javascript
  • Reading a javascript variable containing a string into another file
  • Possible to prevent 403 errors from logging to the web console?
  • Jquery Accordion - Expand and collapse div on hover
  • jquery .hide() function - Hide mobile, Display Desktop
  • Holding password in javascript variable - security implications?
  • JQPlot trouble to render vertical stacked bar and horizontal legend
  • counts days inbetween then add class to those days with nested divs?
  • Marionette.js with Rails (Devise) Authentication
  • javascript anonymous function evaluation idiom
  • Why am I losing the decimal when working this equation in Javascript?
  • Site redirects to index.php after being open while making calls to an API using AJAX
  • How to determine when multiple callbacks are all done
  • How to update Yeoman dependencies?
  • How can I do a /resolve with the Soundcloud Javascript SDK?
  • I'm not able to call a named callback function
  • How to get value of Paragraph element contained in <div> in HTML using JavaScript
  • Javascript - Get value from textbox and save it on a string
  • Backbonejs collection not populated, but fetch works
  • when function's internal [[scope]] property is assigned?
  • Wrapping around the edges in a 2d array (game of life)?
  • Clone div with all nested elements along with events in pure javascript
  • How to get response text?
  • Setting and retrieving cookies in javascript
  • Passing parameter with double quotes
  • finding the meaning of the obfuscated javascript
  • Socket.io - Sending data from a pusher stream to the client
  • How to determine the visibility li's in a scrollable ul
  • How to create Scrolling Effect like Grouek website
  • How to display a state in parents template in ui-router
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org