javascript 如何防止jQuery中的点击事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21458199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent click event in jQuery?
提问by Swap L
My html code is as follows:
我的html代码如下：
<h4 class="milestonehead" style="cursor: pointer;" onclick="editFun('35');">
Some Header
<img src="/images/delete.gif" style="float: right;" onclick="deletefun('35');">
</h4>
There are two functions in <h4>if user click on header i.e <h4>then I need to open a popup with edit form. If user click on delete image/icon then I need to execute a delete function.
<h4>如果用户单击标题，则有两个功能，即<h4>我需要打开一个带有编辑表单的弹出窗口。如果用户单击删除图像/图标，则我需要执行删除功能。
Both functions editFunand deletefunexecute ajax calls. In my case if the user clicks on delete icon then first it calls editFunfunction and then it is calling deleteFun. How can I call the appropriate function for the event.
这两个函数editFun和deletefun执行AJAX调用。就我而言，如果用户单击删除图标，则它首先调用editFun函数，然后调用deleteFun. 如何为事件调用适当的函数。
采纳答案by Andy
If you're using jQuery, get rid of the inline JS and CSS and move them into their own files:
如果你使用 jQuery，去掉内联的 JS 和 CSS 并将它们移动到它们自己的文件中：
CSS:
CSS：
.milestonehead { cursor: pointer; }
.image { float: right; }
HTML
HTML
<h4 class="milestonehead" data-id="35">
Some Header
<img class="image" src="/images/delete.gif">
</h4>
JS
JS
$(document).on('click', '.milestonehead', function () {
var id = $(this).data('id');
editFun(id);
});
In this case you can just use the data id on the parent node. Data attributes are by far the best way to store data on your HTML elements.
在这种情况下，您可以只使用父节点上的数据 ID。到目前为止，数据属性是在 HTML 元素上存储数据的最佳方式。
$(document).on('click', '.image', function (e) {
e.stopPropagation();
var id = $(this).parent().data('id');
deleteFun(id);
});
回答by Robert Koritnik
Your problem = click propagation
您的问题 = 点击传播
Events in browser are being propagated along DOM element tree. You have to stop that in order for each call to individually execute. Your code also sets click handlers inline so I'd rather suggest you separate functionality from your markup.
浏览器中的事件沿着 DOM 元素树传播。您必须停止该操作才能单独执行每个调用。您的代码还设置了内联点击处理程序，因此我建议您将功能与标记分开。
Use jQuery
使用jQuery
Instead of setting click handlers inline use jQuery:
而不是设置点击处理程序内联使用 jQuery：
$(".milestonehead img").click(function(evt) {
evt.preventDefault();
deletefun("35");
});
And similar for your H4. Mind that my jQuery selector may not be appropriate in your situation but you can always distinguish particular elements by IDs or CSS classes.
与您的H4. 请注意，我的 jQuery 选择器可能不适合您的情况，但您始终可以通过 ID 或 CSS 类来区分特定元素。
Separation of concerns
关注点分离
Externalizing your functionality to code only file (or at least code block in your page) makes your page much more maintainable.
将您的功能外化为仅编码文件（或至少是页面中的代码块）使您的页面更易于维护。
Set event handlers in DOM Ready event:
在 DOM Ready 事件中设置事件处理程序：
$(function(){
$(".milestonehead").click(function(evt) {
evt.preventDefault();
editfun("35");
});
$(".milestonehead img").click(function(evt) {
evt.preventDefault();
deletefun("35");
});
});
Improving markup
改进标记
It seems that you have a list of some items (as you're doing something related to item 35) where each one is being represented by h4and nested delete icon. Hence I'd rather change markup (and code) to do this:
似乎您有一些项目的列表（因为您正在做与项目35相关的事情），其中每个项目都由h4嵌套的删除图标表示。因此，我宁愿更改标记（和代码）来执行此操作：
<h4 class="milestonhead" data-edit-item="35">
Some header
<img src="/images/delete.gif" data-delete-item="35" />
</h4>
Style your elements using CSS file instead (separation of concerns again either in separate CSS file or styleblock on your page) and you can thank me for this later.
改用 CSS 文件为您的元素设置样式（在单独的 CSS 文件或style页面上的块中再次分离关注点），稍后您可以为此感谢我。
.milestonehead {
cursor: pointer;
}
.milestonehead img {
float: right;
}
Code to handle these items would then look like this:
处理这些项目的代码如下所示：
$(function() {
$("[data-edit-item]").click(function(evt){
evt.preventDefault();
editfun($(this).data("editItem"));
});
$("[data-delete-item]").click(function(evt){
evt.preventDefault();
deletefun($(this).data("deleteItem"));
});
});
This creates two common click handlers for any element that would have appropriate data attributes (data-edit-itemor data-delete-item). So your header may have these as well some "Edit" link too. Just set appropriate values to that particular data attribute.
这将为具有适当数据属性（data-edit-item或data-delete-item）的任何元素创建两个常见的点击处理程序。所以你的标题也可能有这些以及一些“编辑”链接。只需为该特定数据属性设置适当的值。
回答by Anthony Grist
It's going to be much easier if you use jQuery to bind your event handlers. You'll need to make a modification to your HTML so that you can identify the ID (I assume the 35 is an ID, at any rate) for that particular call.
如果您使用 jQuery 绑定您的事件处理程序会容易得多。您需要对 HTML 进行修改，以便您可以识别该特定呼叫的 ID（无论如何，我假设 35 是一个 ID）。
<h4 class="milestonehead" style="cursor: pointer;" data-id="35">
Some Header
<img src="/images/delete.gif" style="float: right;">
</h4>
Then the jQuery:
然后是jQuery：
$('h4').on('click', function(e) {
var id = $(this).attr('data-id');
editFun(id);
}).find('img').on('click', function(e) {
e.stopPropagation(); // this will prevent the click event being handled by the h4 as well
var id = $(this).closest('h4').attr('data-id');
deletefun(id);
});
EDIT: You might want to change the start of the code to $('h4.milestonehead')depending on whether or not allof the H4 elements that should have that functionality also have that class. If they do, make the change. If they don't, don't make the change (but probably add someclass to make them distinguishable from other H4 elements).
编辑：您可能希望将代码的开头更改为$('h4.milestonehead')取决于应具有该功能的所有H4 元素是否也具有该类。如果他们这样做，请进行更改。如果没有，请不要进行更改（但可能添加一些类以使它们与其他 H4 元素区分开来）。
回答by Pinal
You forgot about event propagation. Use this:
你忘记了事件传播。用这个：
<h4 class="milestonehead" style="cursor: pointer;" onclick="return editFun('35');">
Some Header
<img src="/images/delete.gif" style="float: right;" onclick="return deletefun('35');">
</h4>
editFunand deletefunmust ends return false;
editFun并且deletefun必须结束return false；
回答by niaccurshi
First thing is to check what your target is. In your event you should be running
第一件事是检查你的目标是什么。在您的活动中，您应该运行
function(event) {
//code here
}
You can use event.target to find out what element in the DOM you've actually hit. From here you can use this value to determine if you should run the function or not, for example if the element is the "img" then don't run editFun()!
您可以使用 event.target 找出您实际点击的 DOM 中的哪个元素。从这里您可以使用此值来确定是否应该运行该函数，例如，如果元素是“img”，则不要运行 editFun()！
For something this simple though, you may be better off putting event.stopPropagation(); in your deleteFun function, since it's a simple "either/or" kind of situation.
不过，对于这么简单的事情，最好放置 event.stopPropagation(); 在您的 deleteFun 函数中，因为这是一种简单的“非此即彼”的情况。
More info on this method can be found here: How to stop event bubbling on checkbox click
可以在此处找到有关此方法的更多信息：如何在复选框单击时停止事件冒泡
