CODEWITHSUNDEEP
javascriptjqueryhtml
Prasanth Louis
Prasanth Louis

Reputation: 5066

Managing Event Propagation in Javascript Files

Below are two intertwined Javascript files. How do I manage event propagation between two Javascript files in general? 1st js file

var red = [0, 100, 63];

var orange = [40, 100, 60];

var green = [75, 100, 40];

var blue = [196, 77, 55];

var purple = [280, 50, 60];


var myName = "Prasanth Louis";

var letterColors=[red,orange,green,blue,purple];

if(10 > 3) {
    bubbleShape = "square";
}


else {
    bubbleShape = "circle";
}


drawName(myName, letterColors);

bounceBubbles();

$(document).ready(function(){
$('body').click(function()
{
$('body').load('index1.html')});
});

2nd js file //This works perfectly fine in the absence of the 1st js file

 var main = function() {
  $('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
  });
  $('.arrow-prev').click(function(){
     var currentSlide=$('.active-slide')
     var prevSlide=currentSlide.prev()
      var currentDot = $('.active-dot');
  var prevDot = currentDot.prev();
     if(prevSlide.length==0)
     {
         prevSlide=$('.slide').last();
          prevDot = $('.dot').last();
     }


     currentSlide.fadeOut(600)
     currentSlide.removeClass('active-slide')
     prevSlide.fadeIn(600)
     prevSlide.addClass('active-slide')
      currentDot.removeClass('active-dot');
  prevDot.addClass('active-dot');

  });

  $('.arrow-next').click(function() {

    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();
var currentDot=$('.active-dot')
var nextDot=currentDot.next();


    if(nextSlide.length==0)
    {
        nextSlide=$('.slide').first();
        nextDot=$('.dot').first();
    }
     currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
    currentDot.removeClass('active-dot')
nextDot.addClass('active-dot')
  });
}
$(document).ready(main);

Upvotes: 0

Views: 110

Answers (2)

Danyu
Danyu

Reputation: 507

So there are two ways of event propagations:

  • bubbling

  • capturing

For more details, Check this awesome reading

In jQuery, click event propagation is always bubbling.

Bubbling means click event is triggered/propagated from clicked element to top parent element. You can think of it from inside out.

In your case, when inner elements (like arrow-prev/arrow-next/...) from 2nd js file gets clicked, its event handler gets triggered first. Then click event handler of body gets triggered last, which reloads the page and causes unexpected behavior.

Two ways to avoid this issue:

  1. Add event.stopPropagation to your inner elements' event handlers

    Example: 

$('.arrow-next').click(function(e) {
  ... // your existing codes
  // put a stop here to prevent event being handled by body
  e.stopPropagation();
});

  2. Add following check to body's click event

    $(document).ready(function(){
  $('body').click(function(){
    if(e.target==e.currentTarget){
    // this make sure that page is loaded only when 
    // body is clicked.
    $('body').load('index1.html')});
  }
});

Upvotes: 0

Amadan
Amadan

Reputation: 198436

You do not prevent event propagation in 2nd js file, so both the event on .arrow-prev from 2nd js file and the one on body from the 1st js file will execute. This means, body will be replaced. I can't tell the exact behaviour since I don't know what you have in your index1.html file, but that is the only interaction that I can see.

Use stopPropagation to not allow the browser to catch both event handlers.

Upvotes: 1

Related Questions