javascript - 两个插件。两者在同一元素上都有单击事件，但其中一个取消了另一个

Question

(下面的问题)

这里的第一个脚本充当过滤器，当单击 .filter 按钮 a 时，与相应数据过滤器名称关联的所有 div 都会被过滤掉。所以基本上我有一键点击功能。

jQuery(document).ready(function(e) {
    var t = $(".filter-container");
    t.imagesLoaded(function() {
        t.isotope({
            itemSelector: "figure",
            filter: "*",
            resizable: false,
            animationEngine: "jquery"
        })
    });
    $(".filter-buttons a").click(function() {
        var n = $(this).parents(".filter-buttons");
        n.find(".selected").removeClass("selected");
        $(this).addClass("selected");
        var r = $(this).attr("data-filter");
        t.isotope({
            filter: r
        });
        event.preventDefault()
    });
    $(window).resize(function() {
        var n = $(window).width();
        t.isotope("reLayout")
    }).trigger("resize")
});

这是适用于我的 .filter-buttons ul li a 下拉列表的第二个脚本。还有一个作用于同一元素的点击事件。

   function DropDown(el) {
            this.f = el;
            this.placeholder = this.f.children('span');
            this.opts = this.f.find('ul.dropdown > li');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.f.on('click', function(event){
                    $(this).toggleClass('active');
                    event.preventDefault()
                });

                obj.opts.on('click',function(){
                    var opt = $(this);
                    obj.val = opt.text();
                    obj.index = opt.index();
                    obj.placeholder.text(obj.val);
                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(function() {

            var f = new DropDown( $('#f') );

            $(document).click(function() {
                // all dropdowns
                $('.filter-buttons').removeClass('active');
            });

        });

我的问题是如何防止第一个脚本取消第二个脚本，反之亦然？我尝试删除“return false”行，并尝试更改脚本的顺序，但都没有解决问题。我想过合并它们，但说实话，我不确定这是如何完成的，或者这是否是正确的方法。

  <div id="f" class="filter-buttons" tabindex="1">
                        <span>Choose Genre</span>
                        <ul class="dropdown">
                            <li><a href="#" data-filter="*" class="selected">All</a></li>
                            <li><a href="#" data-filter=".electronic">Electronic</a></li>
                            <li><a href="#" data-filter=".popular">Popular</a></a></li>
                        </ul>
                    </div>

Answer 1

我认为你的 jQuery 有问题，我尝试了你的代码的一个稍微精简的版本:

$(document).ready(function() {
    $(".filter-buttons a").click(function() {
        alert("click 1");
        event.preventDefault();
    });
});

function DropDown(el) {
    this.f = el;
    this.placeholder = this.f.children('span');
    this.opts = this.f.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
        
        obj.f.on('click', function(event){
            alert("click 2");
            $(this).toggleClass('active');
            event.preventDefault()
        });
        
        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

$(document).ready(function() {
    
    console.log($("#f"), $("#f").on);
    var f = new DropDown( $('#f') );
    
    $(document).click(function() {
        // all dropdowns
        $('.filter-buttons').removeClass('active');
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="f" class="filter-buttons" tabindex="1">
    <span>Choose Genre</span>
    <ul class="dropdown">
        <li><a href="#" data-filter="*" class="selected">All</a></li>
        <li><a href="#" data-filter=".electronic">Electronic</a></li>
        <li><a href="#" data-filter=".popular">Popular</a></li>
    </ul>
</div>

它似乎有效，(按“运行代码片段”)。但是当我在 jsfiddle 上使用 jQuery v1.6.4 运行它时，由于某种原因它不起作用 $("#f")不包含on函数，所以obj.f.on('click', function(event){不会分配事件，而是产生错误 Uncaught TypeError: undefined is not a function (对于我在 Chrome 上来说)。我尝试更换 .on('click',与 .click(这似乎有效。因此，这可能意味着您需要更新版本的 jQuery(v1.7 或更高版本)，如查看 jQuery 的 .on()文档(http://api.jquery.com/on/):

As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

或使用 .click()相反。