如何在jQuery中防止点击事件？

Question

我的 HTML 代码如下：

<h4 class="milestonehead" style="cursor: pointer;" onclick="editFun('35');">
     Some Header
     <img src="/images/delete.gif" style="float: right;" onclick="deletefun('35');">
</h4>

<h4>中有两个功能，如果用户点击标题，我需要打开一个带编辑表单的弹出窗口。如果用户点击删除图像/图标，则需要执行删除功能。

两个函数editFun和deletefun都执行ajax调用。在我的情况下，如果用户点击删除图标，则首先调用editFun函数，然后再调用deleteFun函数。如何为该事件调用适当的函数。

- Swap L

Answer 1

如果你正在使用jQuery，去掉内联的JS和CSS，并将它们移动到相应的文件中：

CSS：

.milestonehead { cursor: pointer; }
.image { float: right; }

HTML

<h4 class="milestonehead" data-id="35">
  Some Header
  <img class="image" src="/images/delete.gif">
</h4>

JS

$(document).on('click', '.milestonehead', function () {
  var id = $(this).data('id');
  editFun(id);
});

在这种情况下，您可以只使用父节点上的数据id。数据属性是在HTML元素上存储数据的最佳方式。

$(document).on('click', '.image', function (e) {
  e.stopPropagation();
  var id = $(this).parent().data('id');
  deleteFun(id);
});

- Andy

---

我的标记是通过Ajax调用动态添加的，所以我需要使用.live或.bind事件来代替.on吗？ - Swap L

不是了。在jQuery中，on替代了live。这是处理事件委托的最佳方式。 - Andy

如果您在页面加载后添加到DOM，则需要使用事件委托，就像我上面提到的那样。 $('.image').click(function ()... 不起作用。 - Andy

是的，作为对Robert Koritnik的回答，使用.click事件。现在你能告诉我使用.CLASSNAME还是[ATTRIBUT]更好，就像Robert Koritnik的回答中提到的那样。 - Swap L

这取决于是否点击“.milestonehead”类将始终调用“editFun”。如果是这样，也许还是坚持使用类，但我喜欢罗伯特的答案。完全由你决定。你喜欢什么？ - Andy

Answer 2

您的问题 = 点击传播

在浏览器中，事件沿DOM元素树传播。为了让每次调用单独执行，您需要停止这种传播。您的代码还会内联设置点击处理程序，因此我建议将功能与标记分开。

使用jQuery

不要内联设置点击处理程序，而是使用jQuery：

$(".milestonehead img").click(function(evt) {
    evt.preventDefault();
    deletefun("35");
});

对于您的H4也是同样的处理方式。请注意，我的jQuery选择器可能不适用于您的情况，但您始终可以通过ID或CSS类来区分特定元素。

关注点分离

将功能性代码外部化为单独的文件（或至少在页面中作为代码块）可使您的页面更易于维护。

在DOM Ready事件中设置事件处理程序：

$(function(){
    $(".milestonehead").click(function(evt) {
        evt.preventDefault();
        editfun("35");
    });

    $(".milestonehead img").click(function(evt) {
        evt.preventDefault();
        deletefun("35");
    });    
});

改善标记

看起来您有一些项目列表（因为您正在处理与项目 35 相关的内容），其中每个项目都由 h4 和嵌套的删除图标表示。因此，我建议更改标记（和代码）以执行以下操作：

<h4 class="milestonhead" data-edit-item="35">
    Some header
    <img src="/images/delete.gif" data-delete-item="35" />
</h4>

请使用CSS文件来为您的元素进行样式设置（再次分离关注点，无论是在单独的CSS文件中还是在您的页面上的style块中），这样您以后就可以感谢我了。

.milestonehead {
    cursor: pointer;
}

.milestonehead img {
    float: right;
}

处理这些项目的代码将如下所示：

$(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"));
    });

});

这会为具有适当数据属性（data-edit-item或data-delete-item）的任何元素创建两个常见的点击处理程序。因此，您的标题也可能具有这些以及一些“编辑”链接。只需将适当的值设置为该特定数据属性即可。

- Robert Koritnik

---

这个标记是动态添加的，所以我需要使用live方法还是bind方法？ - Swap L

$(document).on('click', '[data-edit-item]', function () { evt.preventDefault(); editfun($(this).data("edit-item")); }); 正常工作 我非常感谢你的回答 - Swap L

Answer 3

使用jQuery绑定事件处理程序会更容易。您需要修改HTML以便识别该特定调用的ID（我假设35是一个ID）。请注意保留HTML标签。

<h4 class="milestonehead" style="cursor: pointer;" data-id="35">
     Some Header
     <img src="/images/delete.gif" style="float: right;">
</h4>

然后是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);
});

编辑：您可能需要更改代码的开头为$('h4.milestonehead')，具体取决于是否所有应具有该功能的H4元素也具有该类。如果是，请进行更改。如果没有，请勿更改（但可能要添加某些类以使它们与其他 H4 元素区分开来）。

- Anthony Grist

---

使用这个方法，你可以摆脱HTML中的“onclick”属性，并且可以使用“.data('id')”代替“.attr('data-id')”。 - Jamiec

@Jamiec 是的，忘记移除 onclick 属性了；我刚刚注意到并已经移除了它们。我可以使用 .data()，但我选择不这样做，主要是因为我不想在使用它时发生 jQuery 所做的隐式类型转换。不过这可能不会有什么区别。 - Anthony Grist

Answer 4

首先要检查你的目标是什么。在你的事件中，你应该运行。

function(event) {
    //code here
}

你可以使用 event.target 查找实际点击的 DOM 元素。从这里，您可以使用此值来确定是否应运行函数，例如如果元素是 "img"，则不要运行 editFun()！但对于这种简单情况，将 event.stopPropagation(); 放在 deleteFun 函数中可能更好，因为它是一种简单的“二选一”情况。有关此方法的更多信息，请参见：如何停止复选框单击事件冒泡。

- niaccurshi

---

这假设你遵循Robert的建议，不要在内联中编写你的javascript，这实际上是一个好习惯。如果你需要传递一个值，在你的h4上使用data-value="35"，然后使用javascript获取该属性。 - niaccurshi

Answer 5

你忘记了事件传播。使用这个：

```html

你忘记了事件传播。使用这个：

```

<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>

editFun和deletefun必须以return false结尾；

- Alex

---

基于问题，提供最短的解决方案。 - Guillermo Gutiérrez