Javascript 如何防止jQuery中的点击事件？

我的html代码如下：

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

某个标题

中有两个功能，如果用户单击标题，即

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

---

这两个函数

editFun

和

deletefun

都执行ajax调用。在我的例子中，如果用户单击删除图标，然后首先调用

editFun

函数，然后调用

deleteFun

。如何为事件调用适当的函数。

首先要检查您的目标是什么。在你的活动中，你应该跑步

function(event) {
    //code here
}

您可以使用event.target找出您实际命中的DOM中的哪个元素。从这里，您可以使用该值来确定是否应该运行该函数，例如，如果元素是“img”，则不要运行editFun（）

不过，对于这么简单的事情，您最好不要推迟事件；在deleteFun函数中，因为这是一种简单的“非此即彼”的情况

有关此方法的更多信息，请参见此处：

您的问题=单击传播 浏览器中的事件正在沿着DOM元素树传播。为了让每个调用单独执行，您必须停止该操作。您的代码还内联设置了单击处理程序，因此我建议您将功能与标记分开

使用jQuery 使用jQuery而不是设置click handlers inline：

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

与您的

H4

类似。请注意，我的jQuery选择器可能不适合您的情况，但您始终可以通过ID或CSS类来区分特定元素

关注点分离 将您的功能外部化为只编码的文件（或者至少是页面中的代码块），可以使页面更易于维护

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

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

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

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

});

---

这将为具有适当数据属性的任何元素创建两个常见的单击处理程序（

数据编辑项

或

数据删除项

）。所以你的标题可能也有一些“编辑”链接。只需为特定的数据属性设置适当的值。

您忘记了事件传播。使用以下命令：

<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

必须结束

返回false

如果您使用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>

---

编辑：您可能希望将代码的开头更改为

$（'h4.milestonehead'）

，具体取决于本应具有该功能的所有h4元素是否也具有该类。如果他们这样做了，就做出改变。如果没有，则不要进行更改（但可能会添加一些类，使它们与其他H4元素区分开来）。

如果使用jQuery，请删除内联JS和CSS，并将它们移动到自己的文件中：

CSS:

HTML

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

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

---

这假设您遵循Robert的建议，不内联编写javascript代码，这实际上只是一个很好的实践。如果您需要传递一个值，请在h4上使用data value=“35”，然后使用javascript获取该属性。这样，您应该去掉HTML中的

onclick

属性，并且可以使用

.data（'id'）

而不是

.attr（'data-id'）

@jamice耶，忘了删除

onclick

属性；我刚才注意到了我自己，把它们拿走了。我可以使用

.data（）

，但我选择不使用，主要是因为我不希望使用jQuery时进行隐含的类型转换。不过，这两种方法可能都不会有什么不同。最短的解决方案，基于问题。此标记是动态添加的，所以我需要使用live或bind方法吗？$（文档）。在（'click'，'[data edit item]'）上，函数（）{evt.preventDefault（）；editfun（$（this.data（“edit item”）；}）；工作正常我很感激你的回答我的标记是通过ajax调用动态添加的，所以我需要使用.live或.bind事件而不是.on吗？不<代码>在jQuery中被替换为

live

。这是最好的处理方法。如果你在页面加载后添加到DOM，你需要像我上面提到的那样使用事件委托<代码>$（'.image'）。单击（函数（）…将不起作用。是。在回答Robert Koritnik使用.click事件时。现在，您可以判断使用.CLASSNAME或[attribute]引用哪个更好吗正如Robert Koritnik回答中提到的。这取决于是否单击

。milestonehead

类将始终调用

editFun

。如果是这样，也许可以继续上课，但我确实喜欢Robert的回答。这完全取决于你。你更喜欢什么？

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

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

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

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

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