0

我正在从 Google Reader 复制一些功能，其中生成的条目表带有星号，允许用户突出显示某些行。我还希望用户能够单击该行以展开条目。要扩展该行，我的 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 代码？

4

1 回答 1

1

阅读stopPropagation()和stopImmediatePropagation()

似乎事件正在从明星冒泡到行动行，这会导致您产生不良影响。

jquery：stopPropagation 与 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>");
    }               
});
于 2012-08-16T17:58:51.310 回答