Question

我正在使用jQuery 2.1.3。我尝试构建一个按钮，在点击时显示/隐藏内容。我还希望在点击包装容器时隐藏内容（在我的应用程序中它是文档本身，但我在下面的示例中使用了常规div）。由于还有一些逻辑需要处理，我也在利用.trigger()启动的自定义事件。

这很好但我有问题。当我显示隐藏的内容时，我将一个eventlistener应用于文档，以便在用户点击其中的任何位置时隐藏内容。在显示内容后直接触发此事件处理程序，导致我的内容立即被隐藏。

我只能在我的切换按钮事件处理程序中使用$evt.stopPropagation()来解决这个问题。但这对我来说没有任何解决方案，因为我需要在其他元素倾听的情况下冒泡。

这是简化的HTML：

<div id="document">
    <button id="btn" type="button">Toggle</button>
    <div id="content" class="hidden">Hidden Content</div>
</div>

继续JS这个：

//trigger custom show event
var show = function () {
    $("#document").trigger("show");
};

//trigger custom hide event
var hide = function () {
    $("#document").trigger("hide");
};

//handle custom show event
$("#document").on("show", function () {
    $("#content").removeClass("hidden");
    $("#document").on("click", hide);//add listener to container, fires immediately
});

//handle custom hide event
$("#document").on("hide", function () {
    $("#document").off("click", hide);//remove listener from container
    $("#content").addClass("hidden");
});

//on toggle button click call custom events
$("#btn").click(function ($evt) {
    //$evt.stopPropagation(); would work but event should propagate
    $("#content").hasClass("hidden") ? show() : hide();
});

JSFiddle

我该怎么办？在切换按钮单击时停止事件传播将显示我的内容，但我需要此事件冒泡，因为还有其他元素在等待。我怎么能避免文件中应用的事件监听器立即触发？

PS：jQuerys .show()/.hide()函数对我来说别无选择。

停止动态绑定事件处理程序立即触发

0 个答案: