stopPropagation（）在IE中不起作用

Question

IE中存在一些问题。事情是在Chrom /歌剧等fin。但在IE浏览器我去点击和toggleClass但没有任何反应。我想执行cancel.bubble会帮助我，但事实并非如此。

以下是HTML：

<div class="title"> 
    <h2>Catamarans</h2> 
    <div class="dateSelect"> 
    <div class="prev"> 
     <p>Prev</p> 
     <a href="#" onClick="dateChange('formattedDate')">< month</a> </div> 
    <div class="next"> 
     <p>Next</p> 
     <a href="#" onClick="dateChange('formattedDate')">month ></a> 
    </div> 
    </div> 

和JQuery的

function dateChange(dateInput){ 
    //creating new instance of the date based on the date passed into the function 
    var nextDay = new Date(dateInput); 


//the date will change according to the date passed in from 1 day to 1 month 
nextDay.setDate(nextDay.getDate()+1); 

//The following will go into another function which formats the date in such a way that vbscript can handle it. 
nextDay = dateFormat(nextDay); 

//updating the values for the a tag in the onclick attribute. and appending to the strVar variable 
var strVar=""; 
strVar += "    <div class=\"prev\">"; 
strVar += "     <p>Prev<\/p>"; 
strVar += "     <a href=\"javascript:void(0)\" onClick=\"dateChange('"+prevMonth+"')\">< month<\/a>"; 
strVar += "     <a href=\"javascript:void(0)\" onClick=\"dateChange('"+prevWeek+"')\">< week<\/a>"; 
strVar += "     <a href=\"javascript:void(0)\" onClick=\"dateChange('"+prevDay+"')\">< day<\/a>"; 
strVar += "    <\/div>"; 
strVar += "    "; 
strVar += "    <div class=\"next\">"; 
strVar += "     <p>Next<\/p>"; 
strVar += "     <a href=\"javascript:void(0)\" onClick=\"dateChange('"+nextMonth+"')\">month ><\/a>"; 
strVar += "     <a href=\"javascript:void(0)\" onClick=\"dateChange('"+nextWeek+"')\">week ><\/a>"; 
strVar += "     <a href=\"javascript:void(0)\" onClick=\"dateChange('"+nextDay+"')\">day ><\/a>"; 
strVar += "    <\/div>"; 


//For each .title it finds, it will look for its child .dateselect and remove .dateselect child. It will then append new data to .dateselect with the updated values 
$(".title").each(function(index, element) { 
    $(this).find('.dateSelect').children().remove(); 
    $(this).find('.dateSelect').append(strVar); 

    var boatName = $(this).next().attr('id'); 
     if(!$(this).next().hasClass('hide')){ 
      if(boatName == "SailingCatamaran"){ 
       $(this).next().load("availability.asp?boatType=SailingCatamaran&date="+dateInput+""); 
       //alert(dateInput); 
      } 
      else if(boatName == "PowerCatamaran"){ 
       $(this).next().load("availability.asp?boatType=PowerCatamaran&date="+dateInput+""); 
      } 
      else{ 
       $(this).next().load("availability.asp?boatType=nothing&date="+dateInput+""); 
      } 
     } 
}); 
//Stops propagation so when day,week or month are clicked, the table won't disappear 
event.stopPropagation(); 

} 

$(document).ready(function() { 

/*$("table").first().load("availability.asp?boatType=PowerCatamaran&date="+current+"", function(response, status, xhr){ 
    if (status == "error") { 
     var msg = "Sorry but there was an error: "; 
     $("table").html(msg + xhr.status + " " + xhr.statusText); 
    } 
});*/ 

$(".title").click(function(event){ 


    $(this).next().toggleClass("hide"); 
    var boatName = $(this).next().attr('id'); 
    if(!$(this).next().hasClass('hide')){ 
     if(boatName == "SailingCatamaran"){ 

      $(this).next().load("availability.asp?boatType=SailingCatamaran&date="); 
     } 
     else if(boatName == "PowerCatamaran"){ 

      $(this).next().load("availability.asp?boatType=PowerCatamaran&date="); 
     } 
     else{ 

      $(this).next().load("availability.asp?boatType=SailingMonohull&date="); 
     } 
    } 
    $(this).children().last().toggleClass("hide"); 
    $(this).find('.dateSelect').toggleClass("hide"); 
    //alert("title being clicked"); 
}); 

event.stopPropagation(); 
}); 

我已经去掉了不必要的/重复的代码，所以这是一个有点更容易阅读。为了用文字解释我的代码，我有一个带有一类标题的div，点击它可以显示/隐藏它的兄弟表。当显示表格时，您会看到一些A标签，点击时会调用dateChange（）加载相应的信息。单击以显示隐藏表格并单击A标记在IE中不起作用。我怀疑其他浏览器。有任何想法吗？我不知道如果dateChange（）需要一个事件或什么？这个哈哈还是新的！提前欢呼！

Answer 1

看来你的问题是由于IE中的event对象的处理不同造成的。在IE9和之前，事件对象不是事件处理器上下文中的局部变量，而是全局变量。

而不是直接调用event.stopPropagation()，尝试这样做第一：

event = event || window.event; 
event.stopPropagation(); 

IE9显然填充window.event对象，而不是局部变量。

---

一个更好的办法是使用jQuery事件绑定按钮，并且从来没有在HTML中使用onclick属性。正如在评论中指出的那样，jQuery将标准化事件对象，以便可以从一个通用接口访问它。这方面的一个例子是：

HTML：

<a href="#" id="prevMonthBtn">&lt; month</a> 

的Javascript使用jQuery：

$("#prevMonthBtn").click(dateChange); 

你可以找到另一种方式来传递参数formattedDate在

Answer 2

发生了什么事这里是事件不在dateChange的范围内。这适用于某些浏览器，因为它使它可以调用dateChange但IE不这样做。

问题的根源在于您没有正确追加链接。这将会是最好不要生成html像你与你的SETVAR那里做，并生成与jQuery DOM元素代替，这将是这个样子：

var $prev_container = $('<div>') 
    .addClass('prev') 
    .appendTo($(this).find('.dateSelect')); 

var $prev_month_link = $('<a>') 
    .html("month") 
    .click(function(event){ 
    dateChange(prevMonth) // I'm not sure where prevMonth comes from, but I would pass it in to dateChange explicitly 
    event.stopPropagation(); 
    }) 
    .appendTo($prev_container) 

    // and so on for the other links 

这样做的原因是你完全控制事件处理函数的范围，同时将标记从javascript中分离出来。

我认为在大多数情况下，如果您发现自己使用onClick并从js写入标记，则必须停下来思考它，因为几乎总是有一种方法可以通过直接与DOM进行交互来完成。

我希望有帮助！

Answer 3

//event.stopPropagation（）; - >评论此行

//添加以下行

（event.stopPropagation）？ event.stopPropagation（）：event.cancelBubble = true;