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来纠正这种情况。单击虚拟文本输入时，会显示状态文本区域，并且隐藏虚拟文本输入。我不知道为什么这会奏效，但似乎解决了我的问题。