Question

我正在从Google阅读器复制一些功能，其中生成一个条目表，其中一个星号允许用户突出显示某些行。我还希望用户能够单击该行以展开条目。要扩展行，我的jquery读取：

$(".action_row").click(function() {
    if( $(this).next().is(':hidden') ) {
        $(".detailed_row").hide();
        $(".selected-action").removeClass("selected-action");
        $("#current-action").removeAttr("id");
        $(this).next().toggle('fast').addClass("selected-action");
        $(this).addClass("selected-action").attr("id", "current-action");
    } else {
        $(".selected-action").removeClass("selected-action");
        $("#current-action").removeAttr("id");
        $(".detailed_row").hide();
    }
});

点击过程中发生的事情并不重要，只需单击.action-row就会触发事件。

但在每个动作行中都是一个明星：

$(".action-star").click(function() {    

    //Toggle the star through CSS
    $(this).toggleClass("star-checked");
    if ($(this).hasClass("star-checked")) {
        $(this).html("<i class='icon-star icon-large'></i>");
    } else {
        $(this).html("<i class='icon-star-empty icon-large'></i>");
    }               
});

如果用户点击星标，我只想切换星标。但是，现在，当点击星星时，它会触发星形切换和action_row事件。

如何更改代码，以便在点击星标时不使用action_row代码？

Answer 1

了解stopPropagation()和stopImmediatePropagation()

似乎事件正在从明星冒泡到动作行，这会导致你不受欢迎的影响。

jquery: stopPropagation vs stopImmediatePropagation

$(".action-star").click(function(e) {    
    e.stopPropagation(); // <-- top stop events from bubbling up
    //Toggle the star through CSS
    $(this).toggleClass("star-checked");
    if ($(this).hasClass("star-checked")) {
        $(this).html("<i class='icon-star icon-large'></i>");
    } else {
        $(this).html("<i class='icon-star-empty icon-large'></i>");
    }               
});

避免在共享公共空间的元素上使用双事件触发器

1 个答案: