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不允许浏览器同时捕获两个事件处理程序。

Answer 2

因此，事件传播有两种方式：

冒泡
捕获

有关更多详细信息，请Check this awesome reading

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

冒泡表示点击事件被触发/从点击元素传播到顶部父元素。您可以从内到外考虑它。

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

两种避免此问题的方法：

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

管理Javascript文件中的事件传播

2 个答案: