Javascript “修改默认值”；驳回；自举模态的行为

按照引导模式JS的编写方式，“.modal”元素中任意位置的单击事件都会关闭该模式。在“.modal”类的任何子类和所有子类上，将禁用dismise行为，允许用户与modal的内容交互

我的问题-我如何稍微修改此行为，以便单击“.modal”的子项将忽略它，但单击子项的子项将不会

<div id="myModal" class="modal fade">
    <div class="foo"><!--dismiss modal on click-->
        <div class="bar"><!--don't dismiss modal on click-->
            <img src="http://placehold.it/1000x800"/>
        </div>
    </div>
</div>

在本例中，所需的行为是，单击“.foo”应该关闭该模式，而单击“.bar”不会关闭该模式，并继续它的常规业务

原因是我正在做一些高级定位，需要围绕实际的模态内容使用两个包装器元素，这两个元素在单击时仍然会忽略模态

---

请参阅JSFIDLE-

这对委托处理程序应该可以实现这一点，您只需设置一次，而不是每个模式：

请注意，顺序很重要，我们需要在单击

.foo

之前忽略对

.bar

的单击

或者，如果避免使用

.foo

和

.bar

类很重要，则可以使用子选择器：

---

将标准数据属性添加到

foo

元素：

<div class="foo" data-dismiss="modal">

---

这是可行的，您不需要指定.modal以外的任何类，因此它仍然是可扩展的

$(".modal > *").click(function(e) {
    $(this).parent().modal('hide');
}).children().click(function(e) {
    return false;
});

---

问题是，你必须为每一个模态都这么做，而不是一个“一劳永逸”的模式。为什么我要为每一个模态都这么做？.modal类是泛型类，将用于每个modal.modal-added模态。我已经更新了我的答案，以避免使用

.foo

和

.bar

，如果这很重要的话。旁注：jQuery作为

函数（）{return false；}

处理程序的简写，简单地说就是

false

：

。在（“单击”，false）

：-）这是一个有趣的问题！

<div class="foo" data-dismiss="modal">

$(".modal .bar").on("click", function () { return false; });

$(".modal > *").click(function(e) {
    $(this).parent().modal('hide');
}).children().click(function(e) {
    return false;
});