javascript - jQuery stopPropagation() 在多个子对象上

Question

我有一个歌曲列表，当您单击一首歌曲时，会出现一个下拉菜单并开始播放该歌曲。我已经进行了设置，因此如果您单击下拉菜单，它不会开始自行拉回，您仍必须单击原始轨道详细信息才能将其拉回。

这个例子在这里:http://shacktown.com

我还想将此功能附加到不同的按钮。不过，在另一个页面上，我在歌曲标题旁边有播放/暂停按钮，我也想为它们附加 stopPropagation() 功能。

这是那个页面:http://shacktown.com/oldstage.php

我使用的代码在这里:

    $(document).ready(function(){
        $('.track').click(function(){
            if ( $(this).find('.trackPlayer').is(':hidden') ) {
                //removing color from prev. track
                $(".selectedTrack").removeClass("selectedTrack");
                $('.trackPlayer').slideUp();
                $(this).addClass("selectedTrack");
                $(this).find('.trackPlayer').slideDown();

            } else {
                $(".selectedTrack").removeClass("selectedTrack");
                $(this).find('.trackPlayer').slideUp();
            }
        }).find('.trackPlayer').click(function(e) {
            e.stopPropagation();
        });
    });

我的问题是，如何附加这些 .find()/stopPropagation() 函数中的另一个，而不必创建另一个 $(document) .ready(function(){}) block ？

单击暂停/播放/停止按钮不应导致菜单下拉，我希望按钮被视为根本不在 .track 父级中，如果可能。

Answer 1

您可以提供多个 CSS 选择器。在你的情况下看起来像 .trackInfo div 包含播放/暂停按钮所以代码将是

.find('.trackPlayer, .trackInfo').click(function(e) {
    e.stopPropagation();
});

_{很酷的音乐，顺便说一句!}