为什么我的自定义jQuery`change`事件被触发两次？

Question

我正在尝试制作兼容jQuery的复合HTML输入.

在此示例中,当select更改时,将alert调用两次.为什么？

给定一个简单的容器节点:

<span id="x"></span>

这是一个完全有效的演示:

function el (type) {
    return document .createElement (type);
}

function opt (sel, value) {
    let node = el ('option');
    node .value = value;
    node .appendChild (document .createTextNode (value));
    sel .appendChild (node);
}

let x = document .getElementById ('x');
let a = el ('select');
let b = el ('select');

x .appendChild (a);
x .appendChild (b);

opt (a, 'a_1');
opt (a, 'a_2');
opt (b, 'b_1');
opt (b, 'b_2');

$(a) .change (function () {$(x) .trigger ('change');});
$(b) .change (function () {$(x) .trigger ('change');});

$(x) .change (function () {alert ('changed');});

Answer 1

这是因为当您更改下拉列表中的值时，它会更改父 evelement drom 结构。这意味着您正在更改 A 和 B 的值，A 和 B 的专利是 X，因此它会自动更改，因此您必须停止事件传播

你必须删除下面的代码

$(a) .change (function () {$(x) .trigger ('change');});
$(b) .change (function () {$(x) .trigger ('change');});

或者你必须使用preventDefault();

$(a) .change (function (e) {e.preventDefault(); $(x) .trigger ('change'); return false; });
$(b) .change (function (e) {e.preventDefault(); $(x) .trigger ('change'); return false; });