Question

我有一个令人困惑的情况 - 我正在制作一个待办事项列表，每个（动态生成，因此没有.click（））任务如下所示：

<a href="#" class="col-xs-12 list-group-item task">
    <div class="col-xs-8 spacer p-l-0">
        <div class="col-xs-1 checkbox">
            <span class="fa fa-square-o"></span>
        </div>
        <div class="col-xs-11 p-x-0">
            <span class="task-text">Do that really cool thing</span>
            <p class="date m-b-0"><small class="text-muted"></small></p>
        </div>
    </div>
    <div class="col-xs-3 text-xs-right tag-container pull-xs-right p-r-0" id="tags1">
        <span class="label label-primary tag">cool</span>
        <span class="label label-primary tag">list</span>
    </div>
    <button type="button" class="btn btn-danger btn-sm task-button delete-button pull-xs-right"><i class="fa fa-times"></i></button>
    <button type="button" class="btn btn-warning btn-sm task-button edit-button pull-xs-right"><i class="fa fa-pencil"></i></button>

（我不确定为什么最后/某个标签不会出现在这里，但它就在那里。

我有一个在你点击完整任务时运行的功能（这里简化）：

$('#taskList').on("click", ".task", function(e) {
    if ($(e.target).is('button')) return;
    alert('clicked task');
});

正如您所看到的，如果用户点击其中任何一个按钮，我就不希望它运行，但我确实希望它能在任何其他时间运行。这适用于＆＃34;编辑＆＃34;按钮但由于某种原因不适用于＆＃34;删除＆＃34;按钮，我无法弄清楚为什么。为什么按钮选择器不适用于两者？很高兴根据需要提供额外的文档！

非常感谢。

Answer 1

我建议将点击处理程序添加到您的按钮中，并在其中调用e.stopPropagation()，例如：

// Custom Wordpress Dashboard CSS function myC_dashboard() {     wp_enqueue_style('scg-dashboard-theme', '/assets/themes/THEME/_inc/css/dashboard.css'); } add_action('admin_enqueue_scripts', 'myC_dashboard'); add_action('login_enqueue_scripts', 'myC_dashboard');

然后你可以放心，事件不会冒泡进入你的任务元素：

$('#task-list').on('click', '.delete-button', onDeleteClick);

var onDeleteClick = function(e) {
  e.stopPropagation();
  // perform deletion here... 
};

// same for other buttons...

Answer 2

您最有可能点击<i>中的<button>元素，在这种情况下，e.target将是<i>。你可以尝试：

    var $target = $(e.target);
    if ($target.is('button') || $target.parent().is('button')) return;

e.target.hasClass（）不适用于所有匹配元素

2 个答案: