IE中的event.target有問題

Question

我正在寫一個狀態更新系統的js，以便在我工作的應用程序的各個頁面上使用。我真的開始更習慣於使用JavaScript，所以現在我已經掌握了所有的東西，這對我來說是一個挑戰。

狀態系統基本上是一個Facebook克隆。大多數情況下，一切都應該以Facebook的狀態更新和狀態評論的方式運作。預期的行爲是，當用戶點擊狀態textarea時，狀態textarea下的div滑出來顯示提交按鈕以及其他一些複選框。

如果用戶點擊頁面上的其他任何地方，除了鏈接或任何具有該類的元素，prevent_slideup div就會隱藏提交按鈕和任何複選框。

我使用document.body點擊函數來確定用戶點擊了什麼，所以我知道哪些表單元素要隱藏，如果我甚至應該隱藏它們。我不希望這個幻燈片發生在textarea上，如果這個textarea有焦點，或者用戶正在選擇一個與該表單一致的複選框。因此，這個prevent_slideup類。如果用戶點擊鏈接，我也不想打擾運行幻燈片邏輯。我寧願他們只是離開頁面而不必等待動畫。

我正在用來完成這項任務的代碼可以在$（document.body）.click（function（e））部分中找到，我在其中進行.is（'a'）檢查事件目標

此代碼在Chrome和Firefox中按預期工作，但是在第一次單擊鏈接時，看起來存儲在var target中的元素實際上是一個div而不是錨點。發生的事情就是提交div向上滑動，並且用戶不會被帶到他們剛纔點擊的鏈接上，如果第二次點擊鏈接，用戶就會按照您的預期進入頁面。我認爲在某種程度上存在某種滯後目前發生的事件是什麼。

整個狀態模塊正在工作，而不是這一個奇怪的問題，即關於用戶點擊鏈接時沒有執行的第一次，他們在打開狀態textarea後點擊一個鏈接。這個腳本中是否有任何東西會跳出來解釋這種行爲或者是否有任何其他的建議？

在此先感謝您的幫助。

$(document).ready(function(){ 
    $("textarea.autoresize").autoResize(); 
}); 

$(document.body).click(function (e){ 
    var target = e.target || e.srcElement; 
    console.log(target); 
    console.log($(target).is('a')); 
    if($(target).hasClass('prevent_slideup') || $(target).is('a')) 
    { 
     return true; 
    } 
    else 
    { 
     var active_element = document.activeElement; 
     var active_status_id = $(active_element).attr('data-status_id'); 
     var active_has_data_status_id = (typeof active_status_id !== 'undefined' && active_status_id !== false) ? true : false; 

     $('textarea').each(function(){ 
      if($(this).hasClass('status_comment_textarea')) 
      { 
       var status_id = $(this).attr('data-status_id'); 
       if($('#comment_textarea_'+status_id).val() === '' && (!active_has_data_status_id || active_status_id !== status_id)) 
       { 
        hide_status_comment_submit(status_id); 
       } 
      } 
      else if($(this).attr('id') === 'status_textarea') 
      { 
       if($('#status_textarea').val() === '' && $(active_element).attr('id') !== 'status_textarea') 
       { 
        $('#status_textarea').html($("#status_textarea").attr('placeholder')); 
        hide_status_submit(); 
       } 
      } 
     }); 

     return true;   
    } 
}); 

$("#status_textarea").live('click', function(){ 
    if($('#status_textarea').val() === $("#status_textarea").attr('placeholder')) 
    { 
     $('#status_textarea').html(''); 
    } 
    show_status_submit(); 
    return false; 
}); 

$(".comment_toggle").live('click', function(){ 
    var status_id = $(this).attr('data-status_id'); 
    show_status_comment_submit(status_id); 
    return false; 
}); 

$(".status_comment_submit").live('click', function(){ 
    var status_id = $(this).attr('data-status_id'); 
    $('#status_comment_submit_wrapper_'+status_id).addClass('status_comment_submit_successful'); 
    return false; 
}); 

$(".show_hidden_comments").live('click', function(){ 
    var status_id = $(this).attr('data-status_id'); 
    $('#status_hidden_comments_'+status_id).show(); 
    $(this).hide(); 
    return false; 
}); 

function hide_status_submit() 
{ 
    $("#status_textarea").removeAttr('style'); 
    $("#status_textarea").blur(); 
    $("#status_block").removeClass('padding_b10'); 
    $("#status_submit_wrapper").slideUp("fast"); 
    return false; 
} 

function show_status_submit() 
{ 
    if ($("#status_submit_wrapper").is(":hidden")) 
    { 
     $("#status_block").addClass('padding_b10'); 
     $("#status_submit_wrapper").slideDown('fast'); 
    } 
    return false; 
} 

function hide_status_comment_submit(status_id) 
{ 
    if(!$('#status_comment_submit_wrapper_'+status_id).is(":hidden")) 
    { 
     $('#status_comment_submit_wrapper_'+status_id).hide(); 
     $('#fake_comment_input_'+status_id).show(); 
     $('#comment_textarea_'+status_id).removeAttr('style'); 
    } 
    return false; 
} 

function show_status_comment_submit(status_id) 
{ 
    if($('#status_comment_submit_wrapper_'+status_id).is(":hidden")) 
    { 
     $('#fake_comment_input_'+status_id).hide(); 
     $('#status_comment_submit_wrapper_'+status_id).show(); 
     $('#comment_textarea_'+status_id).focus();  
    } 
    return false; 
} 

function status_comment_submit_successful() 
{ 
    hide_status_comment_submit($('.status_comment_submit_successful').attr('data-status_id')); 
    $('.status_comment_submit_successful').removeClass('status_comment_submit_successful'); 
    return false; 
} 

Answer 1

我想通了，有我的劇本兩個主要問題...

1）的document.body的功能和#status_textarea現場點擊funtioins相互是矛盾的。

2）添加邏輯的#status_textarea功能到document.body的功能後，我注意到，腳本仍然沒有如預期在Internet Explorer中，除非我不得不在功能警報相當的工作。現在的問題是，我在textarea上使用的autoresize插件也與document.body函數衝突。

我能夠通過添加虛擬文本輸入並隱藏狀態textarea來糾正這種情況。單擊虛擬文本輸入時，會顯示狀態文本區域，並且隱藏虛擬文本輸入。我不知道爲什麼這會奏效，但似乎解決了我的問題。