Javascript 单击同一元素上两个脚本中的事件？

编辑：我想我找到了解决方案！在请求进一步帮助之前，我想尝试自己解决此问题=）

第一个脚本禁止第二个脚本作为第一个脚本在第二个脚本上的单击事件运行。由于第二个脚本不起作用，因此无法打开下拉菜单来选择列表项以触发第一个脚本单击

我尝试用event.stopPropagation（）替换所有返回的假语句。然而，这并不管用。尝试重新排序我的脚本，但也失败了。我正在考虑让我的第二个脚本以另一个父div为目标，但这也不起作用。我还尝试了event.stopImmediatePropagation（）和.bind方法

有什么想法吗

第一个实现下拉功能的脚本。包含单击事件

    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事件：

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>

选择类型

我认为您需要简化此过程以了解发生了什么。实际上没有足够的信息来查看事件所附加到的元素

出于参数的考虑，请打开控制台并尝试以下操作：

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

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

当您触发一个事件时，比如说单击一个元素，该事件将在该元素上触发，然后在它的父节点上触发，然后在它的祖辈节点上触发，一直到顶部的根节点

您可以通过调用事件本身中的函数来更改此行为

evt.stopPropagation

告诉事件不要冒泡到祖先节点

evt.preventDefault

告诉浏览器不要执行节点的默认行为（例如，移动到href中为a标记指定的页面）

在jQuery中，来自事件处理程序的

return false

是

evt.preventDefault

和

evt.stopPropagation

的快捷方式。因此，这将阻止事件的发展

我想你有点像：

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

---

这并不能真正解决你的问题，但我喝咖啡的时候很无聊，我想帮你写一个更好的下拉插件

我下面的评论是与代码内联的。有关不间断代码，请参阅

---

我们从您的标准jQuery包装

（函数（$）{…}）（jQuery）

首先，我们将创建一些私有变量来存储信息。通过使用

this.foo=…

我们（可能）不必要地公开了一些东西。如果您需要访问这些变量，则始终可以创建函数来读取它们。这是更好的封装

    // private vars
    var $placeholder = $elem.children("span");
    var $opts    = $elem.find("ul.dropdown > li")
    var value    = "";
    var index    = -1;

现在，我们将定义事件侦听器以及这些事件侦听器可能依赖的函数。这里的好处是，这些函数不必通过

this.*

或在编写

obj.f.*

等时访问所有内容

    // private functions
    function onParentClick(event) {
      $elem.toggleClass("active");
      event.preventDefault();
    }

    function onChildClick(event) {
      setValue($(this));
      event.preventDefault();
    }

    function setValue($opt) {
      value = $opt.text();
      index = $opt.index();
      $placeholder.text(value);
    }

下面是一些属性描述符，用于读取

索引

和

值

    // properties for reading .index and .value
    Object.defineProperty(this, "value", {
      get: function() { return value; }
    });

    Object.defineProperty(this, "index", {
      get: function() { return index; }
    });

最后，让我们在一个数组中跟踪

下拉列表的每个实例，这样用户就不必定义一个特殊的侦听器来停用每个实例

    // track each instance of
    DropDown._instances.push(this);
  }

这是我们将用于跟踪实例的数组

  // store all instances in array
  DropDown._instances = [];

此事件侦听器停用下拉列表的每个“已注册”实例

  // deactivate all
  DropDown.deactiveAll = function deactiveAll(event) {
    $.each(DropDown._instances, function(idx, $elem) {
      $elem.removeClass("active");
    });
  }

这是插件中定义的文档侦听器！用户不再需要设置此选项

  // listener to deactiveAll dropdowns
  $(document).click(DropDown.deactiveAll);

因为我们下拉式构造器中的所有内容都依赖于jQuery，所以最好将其作为jQuery插件。这让用户执行
var x=$（“foo”）.dropdown（）

合上包装纸

})(jQuery);


下面是你如何使用它

$(function() {
  var x = $('#f').dropdown();

  // get the value
  f.value;

  // get the index
  f.index;
});


无论如何，是的，我知道这对你的点击监听器没有帮助，但我希望这对你仍然是有用的信息。现在就去邮局
 @Aiden Kane我实际上已经上传了一个测试站点，这样你可以更好地看到发生了什么：正如我所描述的。您将一个事件处理程序连接到顶级节点（
35;f
）和另一个更深层的
$（“.filter buttons a”）。单击
。让我在答案中添加细节。我是javascript新手，所以我从来没有经历过这样的冲突。以上是我的第二个脚本，这就是你的意思吗？一定要仔细阅读事件的工作原理。它们是跨越HTMLDOM和JS世界的基本构建块。这个看起来很古老的页面实际上似乎展示了这个想法，没有太多额外的复杂性。你为什么用elem而不是这个呢？@DeanDemona感谢你注意到了这一点。我最初将它包装在
this.each（function（idx，elem）{new DropDown（$（elem））；}）中
。为了公开一个API（我想您可能会想这样做），我删除了该包装器，只返回了
下拉列表
实例。忘记将代码更新回新下拉列表（$（this））
。顺便说一下，我上传了一个带有下拉列表（选择流派）的测试站点
  // jQuery plugin
  $.fn.dropdown = function dropdown() {
    return new DropDown($(this));
  };

})(jQuery);

$(function() {
  var x = $('#f').dropdown();

  // get the value
  f.value;

  // get the index
  f.index;
});