javascript - 如何停止 `click` 通过 Accordion header 中的输入元素冒泡以避免激活 Accordion 元素

Question

我有一个 jQuery Accordion ，带有 <input>在 Accordion 标题中。 Accordion 是“可折叠的”，但我不希望在单击 <input> 内部时该项目展开(或折叠)。 。

我怎样才能阻止click事件通过<input>冒泡元素以避免激活 Accordion 元素？

有什么聪明的方法来申请event.stopPropagation(); (或类似的东西)到 Accordion beforeActivate -打回来？或者可以直接在 <input> 上完成此操作数据绑定(bind)？

来 self 的绑定(bind)处理程序:

       $(element).accordion({
            header: ".accordion-header",
            collapsible: true,
            navigation: true,
            heightStyle: "content",
            active: false,

            beforeActivate: function (event, ui) {
                active = $(this).accordion("option", "active");
            },
            activate: function (event, ui) {
                event.stopPropagation(); // This obviously has no effect
            }
        })

Answer 1

你做得对.stopPropagation()是正确的，你只是没有把它放在正确的位置，它会进入输入的点击处理程序。

例如。

$(document).on('click', '.my-input', function(e){
     e.preventDefault();   // throw this in for good measures too
     e.stopPropigation();

    //  your code to handle click here
});

HTML

<input data-bind="click: clickHandler" />

knockout :

clickHandler = function(e){
        e.preventDefault();   // throw this in for good measures too
        e.stopPropigation();
};