Question

在IE中遇到一些问题。事情是在Chrom / Opera等。但在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>

使用jQuery的Javascript：

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

您可以找到另一种方法来传递参数formattedDate。

Answer 2

这里发生的事情是事件不在dateChange的范围内。这适用于某些浏览器，因为它们可用于调用 dateChange 的函数，但IE不会这样做。

问题的根源在于您没有“正确”附加链接。最好不要像你在那里使用 setVar 那样生成html，而是使用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（）; - ＆GT;评论这一行

//添加以下行

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

stopPropagation（）在IE中不起作用

3 个答案: