0

我遇到了单击时触发两次事件的问题，我试图打开一个在单击链接时可折叠的 div，然后在第二次单击时再次关闭。问题是该链接是页面上具有相同类和相同功能的众多链接之一。发生的事情是打开事件立即发生，然后是关闭事件，

我不确定为什么会发生这种情况，因为我正在使用单击的元素来识别，

e.currentTarget();

但似乎对点击了什么元素感到困惑。

这是我的代码，

打开 div

itemTab: function(e) {

    var clicked = $(e.currentTarget),
        clickedTab = clicked.data("tab");

    clicked.parent().parent().parent().find(".action-btn").css({
        "width" : "0px",
        "display" : "none"
    });

    clicked.parent().find("div.action-btn").show().animate({
        "width" : "28px"
    }, 250);

    //clicked.closest(".item-tabs").find("li#active").attr("id", "");
    clicked.closest(".item-tabs").find("li.active").removeClass("active");
    clicked.closest(".items-tabs").find("li.active").removeClass("active");
    clicked.parent().addClass("active").attr("id", "active");
    clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
    clicked.closest(".item-tabs").find("." + clickedTab).addClass("active");
    clicked.closest(".item-tabs").find(".close").css("visibility", "visible");

    e.preventDefault();
},

关闭 div

closeTab: function(e) {

            var clicked = $(e.currentTarget).parent(),
                    clickedTab = clicked.data("tab");

            clicked.closest(".item-tabs").find(".tab-content.active").slideUp(500, function() {
                    clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
            });

            clicked.removeClass("active");

            e.preventDefault();

    },

的HTML 

 <article class="item">

    <header class="active">
        <h1>
            <span class="expander"></span>
            <span class="item_name editable">New Item</span>
            <span class="js-complete-item complete-item ">=</span>
            <span class="fileinputbar-button js-open-adder-form add-item-task">+</span>

            <ul class="floating-menu">
                    <span class="tip"></span>
                    <li class="js-add-new-task add-new-task"><a href="#">Add Task</a></li>


                    <li class="js-add-new-item add-new-item"><a href="#">Add Item</a></li>

            </ul>
            <span class="tasks meta">

            <span class="js-task-count">6 / 6 tasks</span>
            <span class="js-completion-status"></span>



        </span></h1>


        <div class="inline-edit item" style="display: none;">


            <form action="/projects/items/edit/71" method="post" accept-charset="utf-8" id="item_name" class="inline_edit edit_item_name" novalidate="novalidate">              

                <p>
                    <input type="text" name="item_name" value="New Item" class="item_name">         
                </p>
                <p>
                    <input type="submit" name="submit" value="Update">
                    <a class="cancel" href="#">Cancel</a>

                        <a href="/projects/items/delete/71" class="delete js-delete-item">Delete</a>

                </p>
                    </form>





        </div>

        <div class="percentage_bar" title="0% Complete" style="background-color: #18fbc5; width: 0%;">0% Complete</div>
    </header>



    <div class="item_content" style="display: block;">
        <div class="item-tabs">
            <ul class="tab-links">
                <li class="active" id="active"><div></div><a href="" class="item-tab" data-tab="description">Description</a><div></div></li>
                <li class="" id="active"><div></div><a href="" class="item-tab" data-tab="tasks" style="color: red;">Tasks</a><div></div><div class="action-btn js-add-tasks" style="width: 0px; display: none;"></div></li>
            </ul>
            <div class="tab-content description active">
                <span class="item_description editable">
                    <p class="add-text js-add-item-description">

                            <span class="faded">No Description, Click to add</span>

                    </p>
                </span>
                <div class="inline-edit js-item-description-edit" style="display: none;">
                    <form action="/projects/items/edit_description/71" method="post" accept-charset="utf-8" id="item_description" class="inline_edit edit_item_description" novalidate="novalidate">                
                        <p>
                            <textarea autofocus="" name="item_description" class="edit_item_description"></textarea>
                            <!--<input type="text" name="item_description" value="" class="edit_item_description"> -->
                        </p>
                        <p>
                            <input type="submit" name="submit" value="Update">                  
                            <a class="cancel" href="#">Cancel</a>
                        </p>
                    </form>
                </div>
            </div>
            <div class="tab-content tasks"><article class="task-list"> 

    <header>
        <h1 class="tasks active">
            <span class="js-task-header">Tasks</span>
            <span class="fileinputbar-button js-open-task-adder-form list-header-add">+</span>
        </h1>
    </header>
        <div class="tasks active">
        <span class="toggle-header">
            <div class="labels">
                <ul>
                    <li><a href="#" class="label" id="active">Active<i class="close-label"></i></a></li>
                    <li><a href="#" class="label" id="completed">Complete<i class="close-label"></i></a></li>
                </ul>
            </div>
                <input id="user-search-query" type="text" name="task_search" value="" placeholder="Filter" class="required file-search">


</span><div class="new-task js-new-task" style="display: none;">
                <form action="" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">
                    <p>
                        <textarea autofocus="" name="task_name" class="item task_name_edit js-task-adder-input" title="Add New Task (Press Enter to add)" placeholder="New task name..."></textarea><a href="#" class="js-task-adder-addbutton"></a>
                        <input type="submit" name="submit" value="Update" class="js-task-adder-input-submit">
                        <a class="cancel" href="#">Cancel</a>
                        <span class="instruction-task-add">Press Enter to add, or shift enter to add a new line</span> 
                    </p>
                </form>

                <a href="/projects/items/stages/tasks/add/12" title="Add New Task" class="js-task-adder-add-new-task js-task-adder-trigger" data-url="/projects/items/stages/tasks/add" data-id="12"></a>
</div>
    <ol class="tasks active"><div name="dasdsadas" task_id="129" id="129" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-26T14:39:23+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
    <li class="">
    <h5><span class="task_name editable">dasdsadas</span>


        <form action="/tasks/edit/129" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">          <p>
                <textarea name="task_name" class="task_name_edit">dasdsadas</textarea>
                <input type="submit" name="submit" value="Update">              <a class="cancel" href="#">Cancel</a>
                <a href="/items/stages/tasks/delete/dasdsadas" title="Delete Task" class="delete">delete</a>            </p>
        </form>

        <div style="clear:both"></div>
        </h5>
            <div class="meta">
                <span>Created by Me <time datetime="2013-09-26T14:39:23+01:00" title="2013-09-26T14:39:23+01:00">5 days ago</time>
                </span>






     <span class="path">

        [ <span class="item">New Item</span>
         ] 
     </span>


            </div>


            <div class="update">
                    <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/129" data-id="129">active</a>
            </div>


        </li>
</div><div name="sdasdas" task_id="127" id="127" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T16:26:07+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
    <li class="">
    <h5><span class="task_name editable">sdasdas</span>


        <form action="/tasks/edit/127" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">          <p>
                <textarea name="task_name" class="task_name_edit">sdasdas</textarea>
                <input type="submit" name="submit" value="Update">              <a class="cancel" href="#">Cancel</a>
                <a href="/projects/items/stages/tasks/delete/sdasdas" title="Delete Task" class="delete">delete</a>         </p>
        </form>

        <div style="clear:both"></div>
        </h5>
            <div class="meta">
                <span>Created by Me <time datetime="2013-09-25T16:26:07+01:00" title="2013-09-25T16:26:07+01:00">6 days ago</time>
                </span>






     <span class="path">

        [ <span class="item">New Item</span>
         ] 
     </span>


            </div>


            <div class="update">
                    <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/127" data-id="127">active</a>
            </div>


        </li>
</div><div name="New Sub Item Task 2" task_id="124" id="124" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T09:43:00+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
    <li class="">
    <h5><span class="task_name editable">New Sub Item Task 2</span>


        <form action="/tasks/edit/124" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">          <p>
                <textarea name="task_name" class="task_name_edit">New Sub Item Task 2</textarea>
                <input type="submit" name="submit" value="Update">              <a class="cancel" href="#">Cancel</a>
                <a href="/projects/items/stages/tasks/delete/New Sub Item Task 2" title="Delete Task" class="delete">delete</a>         </p>
        </form>

        <div style="clear:both"></div>
        </h5>
            <div class="meta">
                <span>Created by Me <time datetime="2013-09-25T09:43:00+01:00" title="2013-09-25T09:43:00+01:00">6 days ago</time>
                </span>






     <span class="path">

        [ <span class="item">New Item</span>
         ] 
     </span>


            </div>


            <div class="update">
                    <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/124" data-id="124">active</a>
            </div>


        </li>
</div><div name="New Sub Item Task 1" task_id="123" id="123" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T09:42:48+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
    <li class="">
    <h5><span class="task_name editable">New Sub Item Task 1</span>


        <form action="/tasks/edit/123" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">          <p>
                <textarea name="task_name" class="task_name_edit">New Sub Item Task 1</textarea>
                <input type="submit" name="submit" value="Update">              <a class="cancel" href="#">Cancel</a>
                <a href="/projects/items/stages/tasks/delete/New Sub Item Task 1" title="Delete Task" class="delete">delete</a>         </p>
        </form>

        <div style="clear:both"></div>
        </h5>
            <div class="meta">
                <span>Created by Me <time datetime="2013-09-25T09:42:48+01:00" title="2013-09-25T09:42:48+01:00">6 days ago</time>
                </span>






     <span class="path">

        [ <span class="item">New Item</span>
         ] 
     </span>


            </div>


            <div class="update">
                    <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/123" data-id="123">active</a>
            </div>


        </li>
</div>
    </ol>
        </div>
</article></div>
        </div>
    <article class="item">

    <header class="active">
        <h1>
            <span class="expander"></span>
            <span class="item_name editable">New Item Sub Item</span>
            <span class="js-complete-item complete-item ">=</span>
            <span class="fileinputbar-button js-open-adder-form add-item-task">+</span>

            <ul class="floating-menu">
                    <span class="tip"></span>
                    <li class="js-add-new-task add-new-task"><a href="#">Add Task</a></li>


            </ul>
            <span class="tasks meta">

            <span class="js-task-count">2 / 2 tasks</span>
            <span class="js-completion-status"></span>



        </span></h1>


        <div class="inline-edit item" style="display: none;">


            <form action="/projects/items/edit/" method="post" accept-charset="utf-8" id="item_name" class="inline_edit edit_item_name" novalidate="novalidate">                

                <p>
                    <input type="text" name="item_name" value="New Item Sub Item" class="item_name">            
                </p>
                <p>
                    <input type="submit" name="submit" value="Update">
                    <a class="cancel" href="#">Cancel</a>

                        <a href="/projects/items/delete/" class="delete js-delete-item">Delete</a>

                </p>
                    </form>





        </div>

        <div class="percentage_bar" title="0% Complete" style="background-color: #18fbc5; width: 0%;">0% Complete</div>
    </header>



    <div class="item_content" style="display: block;">
        <div class="item-tabs">
            <ul class="tab-links">
                <li class=""><div></div><a href="" class="item-tab" data-tab="description">Description</a><div></div></li>
                <li class="active" id="active"><div></div><a href="" class="item-tab" data-tab="tasks" style="color: red;">Tasks</a><div></div><div class="action-btn js-add-tasks" style="width: 28px; display: block;"></div></li>
            </ul>
            <div class="tab-content description">
                <span class="item_description editable">
                    <p class="add-text js-add-item-description">

                            <span class="faded">No Description, Click to add</span>

                    </p>
                </span>
                <div class="inline-edit js-item-description-edit" style="display: none;">
                    <form action="/projects/items/edit_description/" method="post" accept-charset="utf-8" id="item_description" class="inline_edit edit_item_description" novalidate="novalidate">              
                        <p>
                            <textarea autofocus="" name="item_description" class="edit_item_description"></textarea>
                            <!--<input type="text" name="item_description" value="" class="edit_item_description"> -->
                        </p>
                        <p>
                            <input type="submit" name="submit" value="Update">                  
                            <a class="cancel" href="#">Cancel</a>
                        </p>
                    </form>
                </div>
            </div>
            <div class="tab-content tasks active"><article class="task-list"> 

    <header>
        <h1 class="tasks active">
            <span class="js-task-header">Tasks</span>
            <span class="fileinputbar-button js-open-task-adder-form list-header-add">+</span>
        </h1>
    </header>
        <div class="tasks active">
        <span class="toggle-header">
            <div class="labels">
                <ul>
                    <li><a href="#" class="label" id="active">Active<i class="close-label"></i></a></li>
                    <li><a href="#" class="label" id="completed">Complete<i class="close-label"></i></a></li>
                </ul>
            </div>
                <input id="user-search-query" type="text" name="task_search" value="" placeholder="Filter" class="required file-search">


</span><div class="new-task js-new-task" style="display: none;">
                <form action="" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">
                    <p>
                        <textarea autofocus="" name="task_name" class="item task_name_edit js-task-adder-input" title="Add New Task (Press Enter to add)" placeholder="New task name..."></textarea><a href="#" class="js-task-adder-addbutton"></a>
                        <input type="submit" name="submit" value="Update" class="js-task-adder-input-submit">
                        <a class="cancel" href="#">Cancel</a>
                        <span class="instruction-task-add">Press Enter to add, or shift enter to add a new line</span> 
                    </p>
                </form>

                <a href="/projects/items/stages/tasks/add/12" title="Add New Task" class="js-task-adder-add-new-task js-task-adder-trigger" data-url="/projects/items/stages/tasks/add" data-id="12"></a>
</div>
    <ol class="tasks active"><div id="130" name="A new task!" task_id="130" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-26T14:40:17+01:00" completion_date="1999-11-30T01:00:00+00:00" stage="New Item Sub Item" stage_id="74" completed="active" parent_id="74" parent_type="item" project_id="12">
    <li class="">
    <h5><span class="task_name editable">A new task!</span>


        <form action="/tasks/edit/130" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">          <p>
                <textarea name="task_name" class="task_name_edit">A new task!</textarea>
                <input type="submit" name="submit" value="Update">              <a class="cancel" href="#">Cancel</a>
                <a href="/projects/items/stages/tasks/delete/A new task!" title="Delete Task" class="delete">delete</a>         </p>
        </form>

        <div style="clear:both"></div>
        </h5>
            <div class="meta">
                <span>Created by Me <time datetime="2013-09-26T14:40:17+01:00" title="2013-09-26T14:40:17+01:00">5 days ago</time>
                </span>






     <span class="path">

        [ <span class="item">New Item</span>

             / <span class="stage"> New Item Sub Item</span> ] 

     </span>


            </div>


            <div class="update">
                    <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/130" data-id="130">active</a>
            </div>


        </li>
</div><div id="128" name="Boom!" task_id="128" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T17:18:49+01:00" completion_date="1999-11-30T01:00:00+00:00" stage="New Item Sub Item" stage_id="74" completed="active" parent_id="74" parent_type="item" project_id="12">
    <li class="">
    <h5><span class="task_name editable">Boom!</span>


        <form action="/tasks/edit/128" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">          <p>
                <textarea name="task_name" class="task_name_edit">Boom!</textarea>
                <input type="submit" name="submit" value="Update">              <a class="cancel" href="#">Cancel</a>
                <a href="/items/stages/tasks/delete/Boom!" title="Delete Task" class="delete">delete</a>            </p>
        </form>

        <div style="clear:both"></div>
        </h5>
            <div class="meta">
                <span>Created by Me <time datetime="2013-09-25T17:18:49+01:00" title="2013-09-25T17:18:49+01:00">6 days ago</time>
                </span>






     <span class="path">

        [ <span class="item">New Item</span>

             / <span class="stage"> New Item Sub Item</span> ] 

     </span>


            </div>


            <div class="update">
                    <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/128" data-id="128">active</a>
            </div>


        </li>
</div>
    </ol>
        </div>
</article></div>
        </div>
    </div><!-- item_content:end -->
</article></div><!-- item_content:end -->
</article>

事件

events : {
    "click .item-tabs li:not(.active) a": "itemTab",
    "click .item-tabs li.active": "closeTab",
}

事件是否有理由连续运行打开和关闭事件？

4

2 回答 2

0

试试这个来找出点击了哪个元素：

console.log($(e.currentTarget));
console.log($(e.target));

这应该将单击的 HTML 元素输出到控制台。

于 2013-10-01T10:07:13.750 回答
0

在执行代码之前检查isDefaultPrevented可能会解决您的问题，例如：

closeTab: function(e) {
    if(!e.isDefaultPrevented()) { // Add this condition to both functions
        var clicked = $(e.currentTarget).parent(),
                clickedTab = clicked.data("tab");

        clicked.closest(".item-tabs").find(".tab-content.active").slideUp(500, function() {
                clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
        });

        clicked.removeClass("active");

        e.preventDefault();
    }
},
于 2013-10-01T10:10:45.440 回答