IE中的event.target問題

Question

我正在為狀態更新系統編寫js，以便在我正在使用的整個應用程序的各個頁面上使用。 我真的剛開始對JavaScript更加熟悉，因此要達到現在我擁有的一切已經有些困難。

狀態系統基本上是一個Facebook克隆。 在大多數情況下，一切都應該以Facebook狀態更新和狀態注釋的方式起作用。 預期的行為是，當用戶單擊狀態文本區域時，狀態文本區域下的div會滑出，顯示“提交”按鈕以及一些其他復選框。

如果用戶單擊頁面上除鏈接或具有prevent_slideup類的任何元素之外的其他任何位置，則div會向上滑動，從而隱藏提交按鈕和所有復選框。

我正在使用document.body click函數來確定用戶單擊的內容，所以我知道要隱藏哪些表單元素，甚至可以隱藏它們。 如果文本區域具有焦點，或者用戶選擇了與該表單一起使用的復選框，則我不希望在文本區域上發生此幻燈片放大。 因此，prevent_slideup類。 如果用戶單擊鏈接，我也不想打擾運行Slideup邏輯。 我希望他們只是離開頁面而不必等待動畫。

我用於完成此任務的代碼可以在下面的$（document.body）.click（function（e）部分）中找到，該部分中我正在對事件目標進行.is（'a'）檢查。

此代碼在chrome和firefox中可以按預期工作，但是在第一次單擊鏈接時，似乎存儲在var target中的元素實際上是div而不是錨。 最終發生的事情是，提交div滑動並且用戶沒有被帶到他們剛剛單擊的鏈接。 如果第二次單擊鏈接，則將用戶帶到該頁面，如您所願。

在我看來，在當前事件觸發方面存在某種滯后。

整個狀態模塊都在工作，而不是一個奇怪的問題，即關於用戶在打開狀態文本區域后第一次單擊鏈接時未單擊鏈接的錯誤。 該腳本中是否有任何內容可以解釋這種行為，或者有人有其他建議嗎？

在此先感謝您的幫助。

$(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實時單擊功能相互沖突。

2.）在將#status_textarea函數的邏輯添加到document.body函數中之后，我注意到該腳本仍然無法按預期在Internet Explorer中正常工作，除非我對該函數發出警報。 此時的問題是，我在textarea上使用的autoresize插件也與document.body函數沖突。

通過添加虛擬文本輸入並隱藏狀態文本區域，我能夠糾正這種情況。 單擊虛擬文本輸入后，將顯示狀態文本區域，並且虛擬文本輸入被隱藏。 我不知道為什么這行得通，但似乎已經解決了我的問題。