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>，<h4>中有两个函数，那么我需要打开带有编辑表单的弹出窗口。如果用户点击删除图像/图标，那么我需要执行删除功能。

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

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);
});

Answer 2

您的问题=点击传播

浏览器中的事件正沿着DOM元素树传播。您必须停止它才能使每个调用单独执行。您的代码还会内置点击处理程序，因此我建议您在标记中单独设置功能。</ p>

使用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）的任何元素创建两个常用的点击处理程序。所以你的标题也可能有一些“编辑”链接。只需为该特定数据属性设置适当的值。

Answer 3

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

然后是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元素区分开来。）

Answer 4

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

function(event) {
    //code here
}

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

对于这个简单的事情，你可能最好放上event.stopPropagation（）;在你的deleteFun函数中，因为它是一种简单的“两种或那种”情况。

有关此方法的更多信息，请访问：How to stop event bubbling on checkbox click

Answer 5

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

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

如何防止jQuery中的click事件？

5 个答案:

您的问题=点击传播

使用jQuery

关注点分离

改进标记