我遇到点击时触发两次事件的问题，我试图打开一个可以在点击链接时折叠然后再次点击再次关闭的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",
}
事件是否有理由直接在一个接一个地运行开启和关闭事件？
答案 0 :(得分：0)
尝试此操作以找出点击的元素：
console.log($(e.currentTarget));
console.log($(e.target));
这应该将点击的HTML元素输出到控制台。
答案 1 :(得分：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();
}
},