Question

我正在为状态更新系统编写js，以便在我正在使用的应用程序的各个页面上使用。我真的开始对javascript感到更加自在了，所以现在我已经掌握了所有内容，这有点挑战。

状态系统基本上是facebook克隆。在大多数情况下，一切都应该以facebook的状态更新和状态注释的方式运行。预期的行为是当用户点击状态textarea时，状态textarea下的div滑出，显示提交按钮以及其他一些复选框。

如果用户点击页面上的任何其他位置，除了链接或具有类prevent_slideup的任何元素，div会向上滑动隐藏提交按钮和任何复选框。

我正在使用document.body点击功能来确定用户点击的内容，因此我知道要隐藏哪些表单元素，如果我甚至应该隐藏它们。如果textarea具有焦点或者用户正在选择与该表单一起使用的复选框，我不希望在textarea上发生此幻灯片。因此，prevent_slideup类。如果用户点击链接，我也不想打扰运行幻灯片逻辑。我宁愿他们离开页面而不必等待动画。

我用来完成这项任务的代码可以在$（document.body）.click（下面的函数（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实时点击函数相互冲突。

2。）将#status_textarea函数的逻辑添加到document.body函数后，我注意到该脚本在Internet Explorer中仍然没有按预期工作，除非我有一个警报功能。此时的问题是我在textarea上使用的autoresize插件也与document.body函数冲突。

我能够通过添加虚拟文本输入并隐藏状态textarea来纠正这种情况。单击虚拟文本输入时，将显示状态文本区域，并隐藏虚拟文本输入。我不知道为什么会这样，但它似乎解决了我的问题。

IE中的event.target问题

1 个答案: