stopPropagation()在IE中不起作用 [英] stopPropagation() not working in IE

问题描述

IE中存在一些问题.在Chrom/Opera等中情况还不错.但是在IE中，我单击并切换了类，但是什么也没有发生.我以为实现cancel.bubble会对我有帮助，但事实并非如此.

Having some issues in IE. Things are fin in Chrom/Opera etc. But in IE I go to click and toggleClass but nothing happens. I thought implementing cancel.bubble would help me but that is not the case.

以下是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()是否需要事件或其他内容?还是这个新手哈哈！提前加油！

I have stripped out unneccessary/duplicate code so it's a little easier to read. To explain my code in words, I have a div with a class of title, you click it to show/hide its sibling table. when table is shown you will see some A tags and when clicked it will call dateChange() load up the appropriate infomation. the clicking to show hide the table and clicking the A tag doesn't work in IE. I suspect other browsers too. Any ideas? I'm not sure if dateChange() needs an event or something? Still new to this haha! Cheers in advance!

推荐答案

似乎您的问题是由IE中event对象的处理方式不同引起的.在IE9及更高版本中，事件对象不是事件处理程序上下文中的局部变量，而是全局变量.

It seems like your issue is caused by a difference in the handling of the event object in IE. In IE9 and before, the event object is not a local variable in the event handler's context, but instead a global variable.

尝试直接执行以下操作，而不是直接调用event.stopPropagation():

Instead of directly calling event.stopPropagation(), try to do this first:

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

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

IE9 apparently populates the window.event object instead of the local variable.

更好的方法是使用jQuery将事件绑定到按钮，而不使用HTML中的onclick属性.正如评论中指出的那样，jQuery将规范事件对象，以便可以从公共接口访问它.例如:

A much better way would be to use jQuery to bind events to buttons, and never to use the onclick attribute in HTML. As pointed out in the comments, jQuery will normalize the event object so that it can be accessed from a common interface. An example of this would be:

HTML:

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

带有jQuery的Javascript:

Javascript with jQuery:

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

您可以找到另一种传递参数formattedDate的方法.

You can find an alternative way to pass the arguments formattedDate in.

这篇关于stopPropagation()在IE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！