在Javascript文件中管理事件传播

下面是两个相互交织的Javascript文件。通常，我如何管理两个Javascript文件之间的事件传播？ 第一个js文件

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')});
});

 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);

第二个js文件//在没有第一个js文件的情况下，该文件工作得非常好

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')});
});

 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);

---

您不阻止事件在第二个js文件中传播，因此第二个js文件中的

.arrow prev

上的事件和第一个js文件中的

body

上的事件都将执行。这意味着，

主体将被替换。我无法说出确切的行为，因为我不知道您的
index1.html
文件中有什么，但这是我能看到的唯一交互

使用
stopPropagation
不允许浏览器捕获两个事件处理程序。
因此有两种事件传播方式：


冒泡

捕获


欲知详情,

在jQuery中，单击事件传播总是冒泡

冒泡表示单击事件从单击的元素触发/传播到顶部父元素。你可以从里到外去想

在您的例子中，当第二个js文件中的内部元素（如arrow prev/arrow next/…）被单击时，它的事件处理程序首先被触发。然后单击body gets last触发的事件处理程序，这将重新加载页面并导致意外行为

避免此问题的两种方法：

将event.stopPropagation添加到内部元素的事件处理程序中

Example: 

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


将以下检查添加到正文的单击事件

$(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')});
  }
});