单击来自同一元素上的两个脚本的事件? [英] Click events from two scripts on same element?

问题描述

编辑:我想我已经解决了！我想尝试自己解决此问题，然后再寻求更多帮助=)

I think I got the solution! I want to try and fix this myself before I ask for further help = )

第一个脚本禁止第二个脚本用作第一个脚本的单击事件，从而覆盖第二个脚本.由于第二个脚本不起作用，因此无法打开下拉菜单以选择列表项来触发第一个脚本单击.

First script inhibits the second one from functioning as the click event from the first one overides the second one. Because the second one does not function it is impossible to open the drop down menu to select a list item to trigger the first scripts click.

我试图用event.stopPropagation()替换所有返回的false语句.但是没有工作.尝试重新排序我的脚本，但同样失败.我当时想让我的第二个脚本针对另一个父div，但这也没有用.我还尝试了event.stopImmediatePropagation()和.bind方法.

What I tried was replacing all return false statements with event.stopPropagation(). Didnt work however. Tried re-ordering my scripts but that failed as well. I was thinking of making my second script target another parent div but that didnt work either.I also tried event.stopImmediatePropagation() and .bind methods.

有什么主意吗?

第一个执行下拉功能的脚本.包含点击事件.

First script that makes the drop down function. Contains click event.

    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');
                return false;
            });

            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');
        });

    });

第二个脚本进行过滤，还包含click事件:

Second script that does the filtering, also contains click event:

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(evt) {
  var n = $(this).parents(".filter-buttons");
        n.find(".selected").removeClass("selected");
        $(this).addClass("selected");
        var r = $(this).attr("data-filter");
        t.isotope({
            filter: r
        });
    evt.preventDefault();
});
    $(window).resize(function() {
        var n = $(window).width();
        t.isotope("reLayout")
    }).trigger("resize")
});

html结构

<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>

推荐答案

我认为您需要对此进行简化以弄清楚发生了什么.实际上，没有足够的信息来查看事件在此处附加的元素.

I think you're going to need to simplify this to figure out what's going on. There's actually not enough information to see what elements the events are being attached to here.

为了论证，打开控制台并尝试以下操作:

For argument's sake, open the console and try the following:

$(document).on('click', function() { console.log('first'); return false; });
$(document).on('click', function() { console.log('second'); return false; });

然后单击页面.您会看到两个事件都被触发.很有可能您的代码实际上是将事件附加到不同的元素上(您在任何地方都没有说).如果是这种情况，那么您需要了解事件冒泡在DOM中的工作方式.

Then click in the page. You'll see that both events are triggered. It might well be that your code is actually attaching the events to different elements (you don't say anywhere). If that's the case then you need to understand how event bubbling works in the DOM.

当您触发事件时，例如单击某个元素，该事件将在该元素上触发，然后在其父元素，祖父母，祖父母等一直触发到顶部的根节点.

When you trigger an event, say a click on an element, that event will fire on that element, and then on it's parent, then grandparent etc all the way to the root node at the top.

您可以通过在事件本身中调用函数来更改此行为. evt.stopPropagation告诉事件不冒泡到祖先节点. evt.preventDefault告诉浏览器不要对节点执行默认行为(例如，移动到href中为A标签指定的页面).

You can change this behaviour by calling functions in the event itself. evt.stopPropagation tells the event to not bubble up to the ancestor nodes. evt.preventDefault tells the browser not to carry out the default behaviour for a node (eg, moving to the page specified in the href for an A tag).

在jQuery中，事件处理程序中的return false是evt.preventDefault和evt.stopPropagation的快捷方式.这样一来，事件就不会消失了.

In jQuery, return false from an event handler is a shortcut for, evt.preventDefault and evt.stopPropagation. So that will stop the event dead in its tracks.

我想你有类似的东西:

<div event_two_on_here>
    <a event_one_on_here>
</div>

如果处理event_one_on_here的事物调用stopPropagation，则event_two_on_here甚至都不会知道它已发生.显式或隐式(return false)调用stopPropagation将在事件传播到父节点/事件处理程序之前终止该事件.

If the thing that handles event_one_on_here calls stopPropagation then event_two_on_here will never even know it has happened. Calling stopPropagation explicitly, or implicitly (return false) will kill the event before it travels to the parent node/event handler.

更新:在您的情况下，问题在于.filter-buttons a上的处理程序正在停止传播(因此#f不能运行其处理程序).

UPDATE: In your case the issue is that the handler on .filter-buttons a is stopping the propagation (so #f doesn't get to run its handler).

$(".filter-buttons a").click(function(evt) {
    // your code here...

    // Don't do this - it stops the event from bubbling up to the #f div
    // return false;

    // instead, you'll probably just want to prevent the browser default
    // behaviour so it doesn't jump to the top of the page ('url/#')
    evt.preventDefault();
});

这篇关于单击来自同一元素上的两个脚本的事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！