stopPropagation() не работает в IE

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. В IE9 и ранее объект события не является локальной переменной в контексте обработчика события, а вместо этого глобальной переменной.

Вместо прямого вызова event.stopPropagation(), попытайтесь сделать это первым:

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

IE9, по-видимому заполнит window.event объект вместо локальной переменной.

---

Намного лучше было бы использовать JQuery, чтобы связать события с кнопками, и никогда не использовать атрибут onclick в HTML. Как указано в комментариях, jQuery будет нормализовать объект события, чтобы к нему можно было получить доступ из общего интерфейса. Примером этого может быть:

HTML:

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

Javascript с JQuery:.

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

Вы можете найти альтернативный способ передачи аргументов formattedDate в

Answer 2

Что происходит вот что событие не входит в рамки dateChange. Это работает в некоторых браузерах, потому что они делают его доступным для функции, вызывающей dateChange, но IE этого не делает.

Корень проблемы заключается в том, что вы не добавляете свои ссылки «правильно». Было бы лучше, чтобы не генерировать HTML, как вы делаете с вашим SetVar там, и генерировать DOM элементы с JQuery вместо этого, который будет выглядеть примерно так:

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;