javascript - 管理 Javascript 文件中的事件传播

Question

下面是两个交织在一起的 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')});
});

第二个js文件//在没有第一个js文件的情况下这工作得很好

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

Answer 1

您不会阻止第二个js文件中的事件传播，因此第二个js文件中的.arrow-prev上的事件和第一个js文件中的body上的事件文件将执行。这意味着 body 将被替换。我无法说出确切的行为，因为我不知道 index1.html 文件中有什么内容，但这是我能看到的唯一交互。

使用 stopPropagation 不允许浏览器捕获这两个事件处理程序。